微信小程序 地图定位、选址，解决regionchange重复调用

效果：

需求

定位到当前位置，并查询周边的地址显示到列表中，且地图可以拖动选取位置

实现

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>
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

• 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,
     },
  

 

  
1
  
2
  
3
  
4
 

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,
                    });
               }
          })
     },
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

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)
               }
          })
     },
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
 

【注意】getLngLat()这个方法做了抽取，因为不光初始化要调用，且在视野发生变化的时候也要调用

    //视野发生变化时触发
     regionchange(e) {
          if (e.type == 'end') {
               this.getLngLat()
          } else { //begin
          }
     },
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

【重点来了】在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>
  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

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,
          })
     },
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
 

根据当前中心点的经纬度及其他参数去获取位置列表，然后显示到页面中
点击某一条位置的时候带参数返回上一页

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/82015804