效果：
需求
定位到当前位置，并查询周边的地址显示到列表中，且地图可以拖动选取位置
实现
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, }) },
根据当前中心点的经纬度及其他参数去获取位置列表，然后显示到页面中
点击某一条位置的时候带参数返回上一页
