素材牛VIP会员

省市区三级联动带搜索结合百度地图查询位置

 所属分类:网页特效-表格

 浏览:2692次  评论:1次  更新时间:2018-12-12
牛币素材VIP可免积分下载
省市区三级联动带搜索结合百度地图查询位置兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:全国各地省市区三级联动,手动输入地址结合百度地图查询位置

详细介绍

// 在指定容器创建地图实例并设置最大最小缩放级别
var map = new BMap.Map("allmap", {
    minZoom: 4,
    maxZoom: 19
});
 
// 初始化地图,设置中心点和显示级别
map.centerAndZoom(new BMap.Point(116.38, 39.90), 4);
 
// 开启鼠标滚轮缩放功能,仅对PC上有效
map.enableScrollWheelZoom(true);
 
// 将控件(平移缩放控件)添加到地图上
map.addControl(new BMap.NavigationControl());
 
 
// 创建位置检索、周边检索和范围检索
var local = new BMap.LocalSearch(map, {
    renderOptions: {
        map: map
    }
});
 
 
var geocoder = new BMap.Geocoder();
map.addEventListener("click", function(e) { //给地图添加点击事件
 
    geocoder.getLocation(e.point, function(rs) {
 
        alert(rs.address); //地址描述(string)
 
        console.log(rs.addressComponents); //结构化的地址描述(object)
        console.log(rs.addressComponents.province); //省
        console.log(rs.addressComponents.city); //城市
        console.log(rs.addressComponents.district); //区县
        alert(rs.addressComponents.street); //街道
        alert(rs.addressComponents.streetNumber); //门牌号
 
        console.log(rs.surroundingPois); //附近的POI点(array)
 
        console.log(rs.business); //商圈字段,代表此点所属的商圈(string)
    });
 
});
 
// 获取省市区选中select框值,发起检索
function theLocation() {
    var province = $("#province10").val();
    var city = $("#city10").val();
    var district = $("#district10").val();
    var address = document.getElementById("cityName").value;
    /*if (city != "") {
        local.search(city);
    } */
    local.search(province + city + district + address);
};

文件目录结构

  • css
    • ┝ dist.bootstrap.css
  • images
    • ┝ carNormal.png
    • ┝ carNormal1.png
    • ┝ end.png
    • ┝ error.png
    • ┝ error1.png
    • ┝ fault.png
    • ┝ normal.png
    • ┝ start.png
    • ┝ transparent.png
  • ┝ index.html
  • js
    • ┝ dist.bootstrap.js
    • ┝ distpicker.data.js
    • ┝ distpicker.js
    • ┝ main.js

相关素材 - 表格

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:10 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)