记录一下微信小程序实现自动缩放地图大小的过程
官方文档地址:
MapContext.includePoints
最近做了个功能,根据用户和商家之间的距离画出导航线,然后根据距离自动缩放地图的scale
然鹅!官方文档又是一笔带过,没办法,查资料查的一肚子火,好在最后还是实现了,直接贴代码记录一下我踩的坑,也让后面的兄弟别踩了
wxss:
<map id="map"></map>
js:文章来源:https://www.toymoban.com/news/detail-595567.html
//这里括号里的map要和wxss里map的id对应
let MapContext = wx.createMapContext('map');
// 换成具体的坐标点
var lon1 = 坐标点1的经度
var lat1= 坐标点1的纬度
var lon2 = 坐标点2的经度
var lat2= 坐标点2的纬度
var points = [{longitude:lon1,latitude:lat1},{longitude:lon2,latitude:lat2}];
MapContext.includePoints({
// 缩放视野展示所有经纬度 [上,右,下,左] 这里四个值要一致
padding: [10,10,10,10],
points:points,
});
实现效果:苹果还没测试,安卓没问题
文章来源地址https://www.toymoban.com/news/detail-595567.html
到了这里,关于微信小程序 MapContext.includePoints实现自动缩放地图大小的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!