最近接手的项目要求点击门店时，地图也自动切换到该门店的地图并标记出门店位置。实现思路是比较简单的，无非是获取到当前点击的门店的坐标，然后再赋值到地图api的坐标值里。而要获取到门店坐标，就需要先获取门店的具体位置信息。这样一来，理顺了逻辑后，做起来就比较清晰明了了。

这里随便做一下最新的行政区划，毕竟地方的行政区如果更新了，这里也不用去管，不然又要同步本地的行政区数据库信息。Html代码：

javascript代码：

script type=text/javascriptwindow._AMapSecurityConfig = {securityJsCode:xxxxx,}/scriptscripttype=text/javascript src=httpss://webapi.amap.com/maps?v=1.4.15key=xxxxxxxplugin=AMap.DistrictSearch/scriptscript type=text/javascriptvar map, district, polygons = [], citycode;var citySelect = document.getElementById(city);var districtSelect = document.getElementById(district);// var areaSelect = document.getElementById(street);//行政区划查询var opts = {subdistrict: 1, //返回下一级行政区showbiz:false //最后一级返回街道信息};district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用district.search(中国, function(status, result) {if(status==complete){getData(result.districtList[0]);}});function getData(data,level) {var bounds = data.boundaries;if (bounds) {for (var i = 0, l = bounds.length; i l; i++) {var polygon = new AMap.Polygon({map: map,strokeWeight: 1,strokeColor: #0091ea,fillColor: #80d8ff,fillOpacity: 0.2,path: bounds[i]});polygons.push(polygon);}// map.setFitView();//地图自适应}//清空下一级别的下拉列表if (level === province) {citySelect.innerHTML = ;districtSelect.innerHTML = ;// areaSelect.innerHTML = ;} else if (level === city) {districtSelect.innerHTML = ;// areaSelect.innerHTML = ;}// else if (level === district) {// areaSelect.innerHTML = ;// }var subList = data.districtList;if (subList) {var contentSub = new Option(--请选择--);var curlevel = subList[0].level;var curList = document.querySelector(# + curlevel);curList.add(contentSub);for (var i = 0, l = subList.length; i l; i++) {var name = subList[i].name;var levelSub = subList[i].level;var cityCode = subList[i].citycode;contentSub = new Option(name);contentSub.setAttribute(value, levelSub);contentSub.center = subList[i].center;contentSub.adcode = subList[i].adcode;curList.add(contentSub);}}}function search(obj) {//清除地图上所有覆盖物for (var i = 0, l = polygons.length; i l; i++) {polygons[i].setMap(null);}var option = obj[obj.options.selectedIndex];var keyword = option.text; //关键字//新增赋值if(option.value==province){$(#input_province).val(keyword);}else if(option.value==city){$(#input_city).val(keyword);}else if(option.value==district){$(#input_area).val(keyword);}//新增var adcode = option.adcode;district.setLevel(option.value); //行政区级别district.setExtensions(all);//行政区查询//按照adcode进行查询可以保证数据返回的唯一性district.search(adcode, function(status, result) {if(status === complete){getData(result.districtList[0],obj.id);}});}// function setCenter(obj){// map.setCenter(obj[obj.options.selectedIndex].center)// }/script下面是通过具体地址获取到该地址的坐标

script type=text/javascript src=httpss://webapi.amap.com/demos/js/liteToolbar.js/scriptscript$(#getposi).on(click, function(data){var latlon = $(#address).val();if(latlon==){layer.msg(请先填写详细地址);return;}$.ajax({type: get,dataType: jsonp,url: httpss://api.map.baidu.com/geocoding/v3/?address=+latlon+output=jsonak=xxxxxcallback=showLocation,success: function(response) {if (response.status == 0) {// console.log(response.result.location.lng);var position = response.result.location.lng+,+response.result.location.lat;$(#position).val(position)}else{layer.msg(未获取到坐标，请手动填写坐标)}}});});/script以上把获取到的坐标存到数据库，前端点击对应门店的时候获取到对应的坐标即可。

script src=//api.map.baidu.com/api?type=webglv=1.0ak=xxxxxx/scriptscript type=text/javascript$(document).ready(function(){var id = {$first_shop_id};choose(id);});function choose(id){$.ajax({type:post,url: {:_u(contact/getmap)},data:{id:id},success:function(data) {if (data.status == 1) {var geo = data[geo];//坐标信息var title = data[title];var detail = data[detail];if(geo==){layer.msg(未获取到该门店的地图信息);return;}var map = new BMapGL.Map(map); // 创建Map实例var point = new BMapGL.Point(geo[0],geo[1]);//114.06697717163311,22.574821526379186map.centerAndZoom(point, 17);// 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放var marker = new BMapGL.Marker(new BMapGL.Point(geo[0],geo[1]));// 将标注添加到地图map.addOverlay(marker);var opts = {width : 400, // 信息窗口宽度height: 150, // 信息窗口高度title : title // 信息窗口标题}var infoWindow = new BMapGL.InfoWindow(detail, opts); // 创建信息窗口对象// map.openInfoWindow(infoWindow, point); //开启信息窗口marker.addEventListener(click, function(){map.openInfoWindow(infoWindow, point); //开启信息窗口});map.setMapStyleV2({styleId: 655a8b5b044109c4ee1b0e675bf66eba //styleId中是个性化地图发布时生成的样式ID});}}})}/script这里的坐标，后台返回值必须是数组，之前有试过直接返回完整的坐标值，但是赋值到api的point里发现无法生成地图，所以就只能拆开坐标了。以上代码是根据我本地的需求改动的，完整的代码可以在百度地图api中找到。

通过百度地图API实现门店地图动态切换_成都网站制作   https://cdnanqi.cn/wangzhanzhizuo/10918.html