微信小程序 - 滑动显示地点信息(map)

演示效果如下：

资源如下

marker,png

index.wxml

 <view class="map-container">
   <map id="map" longitude="{{myLongitude}}" latitude="{{myLatitude}}" scale="18" bindcontroltap="controltap" markers="{{markers}}" controls="{{controls}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location>
     <cover-view>
       {{text}}
     </cover-view>
   </map>
 </view>

index.wxss

 .map-container {
   position: absolute;
   top:;
   bottom:;
   left:;
   right:;
 }

 map {
   width: 100%;
   height: 100%;
 }

 cover-image {
   width: 30rpx;
   height: 30rpx;
 }

 cover-view {
   padding: 2%;
   text-align: center;
   color: #fff;
   background-color: #09bb07;
 }

index.js

 let QQMapWX = require('qqmap-wx-jssdk.min');
 let qqmapsdk;

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     myLatitude: 0.0,
     myLongitude: 0.0
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
     let page = this

     /**
      * 实例化API核心类(详情见申请key)：http://lbs.qq.com/console/mykey.html
      */
     qqmapsdk = new QQMapWX({
       /**
        *
        *
        * 严重注意!!!!要申请key以及导入qqmap-wx-jssdk.js，具体见上面的网址
        *
        *
        */

       key: '' //XXXX-XXXX-XXXX-XXXX
     });

     /**
      * 调用内部获取位置，默认为wsg84,精确为gcj02
      */
     wx.getLocation({
       type: 'gcj02',
       success: function(res) {
         console.log(res.latitude, res.longitude);
         page.setData({
           myLatitude: res.latitude,
           myLongitude: res.longitude
         });
       }
     })
   },

   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function() {
     this.getLngLat()
   },

   /**
    * 获取中间点的经纬度，并mark出来
    */
   getLngLat() {
     let page = this;
     page.mapCtx = wx.createMapContext("map");
     page.mapCtx.getCenterLocation({
       success: function(res) {
         page.setData({
           markers: [{
             id: 0,
             iconPath: "marker.png",
             longitude: res.longitude,
             latitude: res.latitude,
             width: 30,
             height: 30
           }]
         })
         page.getPoiList(res.longitude, res.latitude)
       }
     })
   },

   /**
    * 视野发生变化时触发：见页面bindregionchange事件
    */
   regionchange(e) {
     e.type == 'end' ? this.getLngLat() : this.getLngLat()
   },

   /**
    * 详情见官方API配置:http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
    */
   getPoiList(longitude, latitude) {
     let page = this
     qqmapsdk.reverseGeocoder({
       location: {
         latitude: latitude,
         longitude: longitude,
       },
       get_poi: 1,
       poi_options: 'policy=2;radius=3000;page_size=2;page_index=1',
       success: function(res) {
         /**
          * 详细数据从这儿拿....
          */
         page.setData({
           text: res.result.pois[0].title
         });
       },
       fail: function(res) {
         console.log(res);
       },
       complete: function(res) {

       }
     });
   }
 })