微信小程序 - 滑动显示地点信息(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

扫描二维码关注公众号，回复： 2970218 查看本文章

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