小程序地图覆盖手绘地图的解决方法
2023-03-31 10:34:11 时间
引言
手绘地图顾名思义就是手工绘制的地图,比普通的地图更有观赏性和生动性,通过把特定的地点绘制出来,兼具实用和纪念性,同时更加具有可看性。一般在旅游景点有很多这种纸质版手绘地图。比如这种:
问题
如何在小程序地图上实现覆盖手绘地图
方法
目前在小程序实现贴图主要有三种方法:
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即可。下次将介绍如何解决小程序地图切换标记点闪屏的问题。
相关文章
- Android NDK Crash 定位分析
- 为什么 iOS 15 系统更新率远不如前
- 一篇文章带给你动画估值器详解
- 腾讯企业QQ将于明年停止服务
- iOS 15.2 新功能:可显示配件更换情况
- Android 13正开发Panlingual功能:可为单个App指定语言
- 苹果在 iOS 15 中使用了 Swift 和 SwiftUI
- 不限速后八大网盘实测对比:还是QQ最香
- 奸商被气哭!iOS 15.2可查看零部件正品
- iOS 15.2已“修复”阻止第三方换屏的问题 但仍有警告弹窗与功能限制
- 狠整不良商贩!苹果更新iOS 15.2细节:能看iPhone零部件是否正品等
- iOS 15 中 Swift 和 SwiftUI 的使用情况
- BUG解决了?苹果关闭iOS 15.1.1验证,升完没得后悔
- 百度网盘青春版真的不限速?实测告诉你答案
- 为什么iOS15.2必须升级,知道这三点你才能恍然大悟
- 苹果iOS 16升级将抛弃iPhone 6s/Plus、iPhone SE初代
- 违规使用 OBS 等源码,抖音海外版被举报
- iOS 15.2使用现状,有人夸有人骂,深度使用之后我来告诉你答案
- 元宇宙真的是骗局吗?CEO、教授、普通人的看法都不一样
- 人才网友把QQ群当网盘用:速度比百度快了100倍