演示效果如下：
资源如下
marker,png
index.wxml
1 <view class="map-container">
2 <map id="map" longitude="{{myLongitude}}" latitude="{{myLatitude}}" scale="18" bindcontroltap="controltap" markers="{{markers}}" controls="{{controls}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location>
3 <cover-view>
4 {{text}} 5 </cover-view>
6 </map>
7 </view>
index.wxss
1 .map-container {
2 position: absolute;
3 top: 0;
4 bottom: 0;
5 left: 0;
6 right: 0;
7 }
8
9 map {
10 width: 100%;
11 height: 100%;
12 }
13
14 cover-image {
15 width: 30rpx;
16 height: 30rpx;
17 }
18
19 cover-view {
20 padding: 2%;
21 text-align: center;
22 color: #fff;
23 background-color: #09bb07;
24 }
index.js
1 let QQMapWX = require('qqmap-wx-jssdk.min'); 2 let qqmapsdk; 3
4 Page({ 5
6 /** 7 * 页面的初始数据 8 */
9 data: { 10 myLatitude: 0.0, 11 myLongitude: 0.0
12 }, 13
14 /** 15 * 生命周期函数--监听页面加载 16 */
17 onLoad(options) { 18 let page = this
19
20
21 /** 22 * 实例化API核心类(详情见申请key)：http://lbs.qq.com/console/mykey.html 23 */
24 qqmapsdk = new QQMapWX({ 25 /** 26 * 27 * 28 * 严重注意!!!!要申请key以及导入qqmap-wx-jssdk.js，具体见上面的网址 29 * 30 * 31 */
32
33
34 key: '' //XXXX-XXXX-XXXX-XXXX
35 }); 36
37 /** 38 * 调用内部获取位置，默认为wsg84,精确为gcj02 39 */
40 wx.getLocation({ 41 type: 'gcj02', 42 success: function(res) { 43 console.log(res.latitude, res.longitude); 44 page.setData({ 45 myLatitude: res.latitude, 46 myLongitude: res.longitude 47 }); 48 } 49 }) 50 }, 51
52 /** 53 * 生命周期函数--监听页面初次渲染完成 54 */
55 onReady: function() { 56 this.getLngLat() 57 }, 58
59
60 /** 61 * 获取中间点的经纬度，并mark出来 62 */
63 getLngLat() { 64 let page = this; 65 page.mapCtx = wx.createMapContext("map"); 66 page.mapCtx.getCenterLocation({ 67 success: function(res) { 68 page.setData({ 69 markers: [{ 70 id: 0, 71 iconPath: "marker.png", 72 longitude: res.longitude, 73 latitude: res.latitude, 74 width: 30, 75 height: 30
76 }] 77 }) 78 page.getPoiList(res.longitude, res.latitude) 79 } 80 }) 81 }, 82
83 /** 84 * 视野发生变化时触发：见页面bindregionchange事件 85 */
86 regionchange(e) { 87 e.type == 'end' ? this.getLngLat() : this.getLngLat() 88 }, 89
90
91 /** 92 * 详情见官方API配置:http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 93 */
94 getPoiList(longitude, latitude) { 95 let page = this
96 qqmapsdk.reverseGeocoder({ 97 location: { 98 latitude: latitude, 99 longitude: longitude, 100 }, 101 get_poi: 1, 102 poi_options: 'policy=2;radius=3000;page_size=2;page_index=1', 103 success: function(res) { 104 /** 105 * 详细数据从这儿拿.... 106 */
107 page.setData({ 108 text: res.result.pois[0].title 109 }); 110 }, 111 fail: function(res) { 112 console.log(res); 113 }, 114 complete: function(res) { 115
116 } 117 }); 118 } 119 })