微信小程序 - 滑动显示地点信息(map)
演示效果如下：
资源如下
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 })
