效果：

需求

定位到當前位置，並查詢周邊的地址顯示到列表中，且地圖可以拖動選取位置

實現

1，在wxml中新增檢視view

<map id="map" 
longitude="{{myLongitude}}" 
latitude="{{myLatitude}}" 
scale="18" 
bindcontroltap="controltap" 
markers="{{markers}}" 
controls="{{controls}}"
bindmarkertap="markertap" 
bindregionchange="regionchange" 
show-location
 
 
style="width: 100%; height: 300px;"></map>

• id是這個map元件標識
• longitude、latitude是經緯度，確定一個位置
• scale 縮放比例
• markers地圖上的標記
• bindmarkertap 點選標記觸發，返回marker的id
• controls控制元件，可以加兩個圖示控制地圖縮放
• bindcontroltap 點選控制元件觸發，會返回控制元件的id
• bindregionchange 視野發生變化時觸發
• show-location 是否顯示位置

2，js中處理邏輯

1.data中初始化資料

    data: {
          myLatitude
 
: 0.0,
          myLongitude: 0.0,
     },

2.onLoad中初始化騰訊地圖（官方文件）和獲取當前位置並更新

     onLoad: function(options) {
          var that = this
          // 例項化API核心類
          qqmapsdk = new QQMapWX({
               key: 'your key'
          });
          wx.getLocation({
               type: 'gcj02',
               success: function
 
(res) {
                    console.log(res);
                    that.setData({
                         myLatitude: res.latitude,
                         myLongitude: res.longitude,
                    });
               }
          })
     },

3.在onReady中初始化操作，獲取中間點的經緯度，並標記出來

    onReady: function() {
          this.getLngLat()
     },

     //獲取中間點的經緯度，並mark出來
     getLngLat: function() {
          var that = this;
          this.mapCtx = wx.createMapContext("map");
          this.mapCtx.getCenterLocation({
               success: function(res) {
                    that.setData({
                         markers: [{
                              id: 0,
                              iconPath: "../../images/location1.png",
                              longitude: res.longitude,
                              latitude: res.latitude,
                              width: 40,
                              height: 40
                         }]
                    })
                    that.getPoiList(res.longitude, res.latitude)
               }
          })
     },

【注意】getLngLat()這個方法做了抽取，因為不光初始化要呼叫，且在視野發生變化的時候也要呼叫

    //視野發生變化時觸發
     regionchange(e) {
          if (e.type == 'end') {
               this.getLngLat()
          } else { //begin
          }
     },

【重點來了】在regionchange方法中操作經緯度會出現bug，會頻繁呼叫，標記也會一直閃，目前官方還沒有修復，網上給的解決方案是臨時定義變數接收，這裡是直接拿著引數去用了，即that.getPoiList(res.longitude, res.latitude) 中的兩個引數

4.獲取周邊的地址列表

wxml

<block wx:for="{{addressList}}" wx:for-item="item" wx:for-index="index" wx:key="item.orderId">
     <view class="weui-media-box weui-media-box_text" bindtap='clickItem' data-title='{{item.title}}' data-address='{{item.address}}' style='background-color:#fff;'>
          <view class="weui-media-box__title weui-media-box__title_in-text">{{item.title}}</view>
          <view class="weui-media-box__desc">{{item.address}}</view>
     </view>
</block>

js

     getPoiList: function(longitude, latitude) {
          var that = this
          // 呼叫介面
          qqmapsdk.reverseGeocoder({
               location: {
                    latitude: latitude,
                    longitude: longitude,
               },
               get_poi: 1,
               poi_options: 'policy=2;radius=3000;page_size=20;page_index=1',
               success: function(res) {
                    that.setData({
                         addressList: res.result.pois
                    })
               },
               fail: function(res) {
                    console.log(res);
               },
               complete: function(res) {
                    console.log(res);
               }
          });
     },

     clickItem: function(e) {
          let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2];
          prevPage.setData({
               address: e.currentTarget.dataset.address,
          })
          wx.navigateBack({
               delta: 1,
          })
     },

根據當前中心點的經緯度及其他引數去獲取位置列表，然後顯示到頁面中
點選某一條位置的時候帶引數返回上一頁