小程序地图覆盖手绘地图的解决方法
Posted 算法与编程之美
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序地图覆盖手绘地图的解决方法相关的知识,希望对你有一定的参考价值。
引言
手绘地图顾名思义就是手工绘制的地图,比普通的地图更有观赏性和生动性,通过把特定的地点绘制出来,兼具实用和纪念性,同时更加具有可看性。一般在旅游景点有很多这种纸质版手绘地图。比如这种:
问题
如何在小程序地图上实现覆盖手绘地图
方法
目前在小程序实现贴图主要有三种方法:
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即可。下次将介绍如何解决小程序地图切换标记点闪屏的问题。
实习编辑:王晓姣
稿件来源:深度学习与文旅应用实验室(DLETA)
以上是关于小程序地图覆盖手绘地图的解决方法的主要内容,如果未能解决你的问题,请参考以下文章