通过百度地图API实现门店地图动态切换

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

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

javascript代码：
 

 
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'xxxxx',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxx&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript">
var 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="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script>
$('#getposi').on('click', function(data){
var latlon = $('#address').val();
if(latlon==''){
layer.msg('请先填写详细地址');
return;
}
$.ajax({
type: "get",
dataType: "jsonp",
url: 'https://api.map.baidu.com/geocoding/v3/?address='+latlon+'&output=json&ak=xxxxx&callback=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=webgl&v=1.0&ak=xxxxxx"></script>
<script 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.574821526379186
map.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中找到。