最近接到一个需求，要求切换城市名的时候同时切换地图的经纬度定位 最后实现的效果是 切换到那个市区，地图就会定位到该城市的中心经纬度

预览如下

1丶 要是实现这个效果 得先准备一个地区选择器。

这里我用的是一个组件从github上找的 https://github.com/staven630/wx-city-picker/issues
这里有个问题 就是组价渲染了 然后字是白色的，可以自己调整一下 
下图中的信息都能在文档中找到，就不在赘述

2 丶 数据源的获取

要获得全国所有的省市区，可以从后端获取，也可以自己从腾讯的sdk获取，这里我建议是前端自己获取。就不劳烦后端了
在这里申请 key  

腾讯地图Sdk 然后配置WebService 权限 那个key后面用得着

1 获取全国数据 然后进行处理 适用组件

   var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); // 这个js你可以在官网下载 也可以使用行政区划那个api不需要下载额外的js文件
   var qqmapsdk = new QQMapWX({
     key: '你申请的key值' // 必填
   });
   
   // onLoad 函数中 处理获取的地区信息
     //调用获取城市列表接口
   qqmapsdk.getCityList({
     success: function (res) {//成功后的回调
       res.result[0].map((item,index)=>{
         res.result[1].map((item1, index1)=>{
           let name1 = item.id.slice(0, 2)
           let name2 = item1.id.slice(0, 2)
           if(name1 == name2 ){
             if (!item.children){
               item.children=[]
             }
              item.children.push(item1)
            }
           })
       })
       console.log("准备就绪位置", res.result[0])
       _this.setData({
       // 这里获得的数据  会带有该地区的经纬度 我只要定位要市级 所以我只保存了市级的信息
         citys: res.result[0],
         citysChid:res.result[1]
       })
     },
   

到这里全国省市区的信息已经拿到了。 选择器也有信息了 我建议是进来的时候有个默认定位当前地区，代码可以参考

wx.getLocation({
     altitude:true,
     success:function(e){
       let latitude = e.latitude;
       let longitude = e.longitude;
       _this.setData({
         newLoacl:e
       })
       //  地图逆向解析
       wx.request({
         url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=你的key值`,
         success:res=>{
           let newList = [res.data.result.address_component.province, res.data.result.address_component.city]
           console.log('获取当前位置 经纬度')
           _this.setData({
             region: newList
           },()=>{
             _this.getLoaclList()
           })
         }
       })

     }
   })

2丶 地图map组件

小程序自带的地图map组件不用多说  这里我们动态绑定他的初始经纬度，在每一次选择了地图之后都会切换一次就OK了

```
//newLoacl 对象里携带着他的经纬度信息
<map id="map" class="allMap" longitude="{{newLoacl.longitude}}" latitude="{{newLoacl.latitude}}"  scale="14"  bindcontroltap="controltap" show-location style="width: 100%; height: 300px;"></map>
```

3丶 联动

选择器触发 onSelect 事件  里面会有你选择的地区位置的id  
也可以去改源码 把选择的哪一项的全部信息传出
或者然后去遍历你保存的地区数组信息

然后拿到当前位置的经纬度

  onSelect:function(e){
    var _this=this
      let  str={}
      //遍历获取经纬度信息
    _this.data.citysChid.map((item,index)=>{
      if (e.detail.code[1] == item.id){
        str=item
      }
    })
    let  newlocal={
      longitude: str.location.lng,
      latitude: str.location.lat
    }
        // 更新位置信息
      this.setData({
        newLoacl: newlocal
      },()=>{
      
      })
 
  },

里面有一些细节部分 有所出入，但大体应该是这样的，那个数据源获取是关键，我建议是也可以从后台，也可以都用腾讯的，还行吧。