地圖坐標(biāo)和屏幕坐標(biāo)互轉(zhuǎn)方式:
MapContext.fromScreenLocation(Object object):該API無(wú)法傳值谷丸、無(wú)任何響應(yīng)
MapContext.getCenterLocation(Object object):API可用
MapContext.toScreenLocation(Object object):官方文檔有錯(cuò)得湘,object應(yīng)包含{latitude: xxx, longitude: xxx}兩項(xiàng)內(nèi)容
在獲取地圖中心點(diǎn)坐標(biāo)例子:
1、在地圖中心點(diǎn)顯示一個(gè)圖片(大頭針)
map_center.png
<map id="myMap" class="myMap" scale="{{scale}}" min-scale="8" longitude="{{longitude}}" latitude="{{latitude}}"
markers="{{markers}}" polyline="{{polyline}}" polygons="{{businessZones}}" show-location="true"
bindmarkertap="tapMarker" bindregionchange="regionDidChange">
<!-- map content -->
<cover-image class="manpCenter" src="../../../images/home/map/map_center.png"></cover-image>
</map>
wxss
.customContainer {
margin-top: 0px;
width: 100vmin;
height: 100vmax;
display: flex;
flex-direction: column;
}
.myMap {
width: 100%;
height: 100%;
}
.manpCenter {
width: 48rpx;
height: 77rpx;
position: absolute;
left: calc(50% - 24rpx);
top: calc(50% - 77rpx);
}
js
onLoad: function (options) {
this.mapCtx = wx.createMapContext('myMap')
},
// 如果僅有地圖縮放但沒(méi)有平移,并不會(huì)觸發(fā)此方法讲竿。目前未發(fā)現(xiàn)有能夠監(jiān)控scale變化的api。如果一定要監(jiān)控縮放,
// 只能自己設(shè)置定時(shí)器庆聘,監(jiān)控this.mapCtx.getScale(Object)。但用戶(hù)體驗(yàn)可能也很差勺卢。
// MapContext官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.getScale.html
regionDidChange(e) {
if (e.type == 'end') { // 注意伙判,這個(gè)事件的type至少有2種類(lèi)型,'begin'和'end'值漫,我們滑動(dòng)一下地圖澳腹,會(huì)有2次響應(yīng)。但我們只關(guān)注'end'Q詈巍=此!
this.getCenterLocation()
}
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function(res){
// console.log(res)
console.log(res.latitude + ',' + res.longitude)
}
})
},