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

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

.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;
}

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