演示效果如下：
資源如下
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 })