|
引言 手绘地图顾名思义就是手工绘制的地图，比普通的地图更有观赏性和生动性，通过把特定的地点绘制出来，兼具实用和纪念性，同时更加具有可看性。一般在旅游景点有很多这种纸质版手绘地图。比如这种： 
问题 如何在小程序地图上实现覆盖手绘地图 方法 目前在小程序实现贴图主要有三种方法： 1.小程序个性化地图扩展功能（需要钱） 2.小程序内嵌webview（初始加载速度慢，而且个人开发的小程序无法使用） 3.应用MapContext.addGroundOverlay接口 排除要钱的和不好用的，这里我们将用第三种方法来实现小程序贴图： index.wxml <map
id="map"
latitude="{{latitude}}"
longitude="{{longitude}}"
style="width: 100%;height:1414rpx;"
>
</map> |
index.js Page({
/**
* 页面的初始数据
*/
data: {
latitude: 30.580251,
longitude: 104.277677,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
this.mapCtx = wx.createMapContext('map')
this.mapCtx.addGroundOverlay({
id: 0,
src: "../image/sctu.png",
bounds: {
southwest: { //西南角
latitude: 30.576161,
longitude: 104.272544,
},
northeast: { //东北角
latitude: 30.585218,
longitude: 104.285232,
}
},
success(res){
console.log('wp', res)
},
fail(err){
console.log('wperr', err)
}
})
},
}) |
实验结果与讨论 最终效果如图： 
注意：目前使用MapContext.addGroundOverlay实现小程序贴图在模拟器上不显示，在手机端可显示。 结语 使用MapContext.addGroundOverlay实现小程序贴图的方法比较简单，只要在js文件中应用该API即可。下次将介绍如何解决小程序地图切换标记点闪屏的问题。 实习编辑：王晓姣
|
