微信小程序地图组件中的include-points怎样缩放视野并将所有坐标点在规定的视野内展示?

摘要:
地图组件用于微信小程序的开发。官方网站文档相对简单,许多核心功能没有详细描述。例如,包含点。如何像滴滴一样显示视野中的所有坐标点;1.如果没有设置中心点纬度和经度,则会出现无法在视野中显示的问题;因此,首先计算两点之间的中心点:varlat=(that.data.from_latitude+that.data.to_latitu

开发微信小程序过程中运用到了map地图组件,官网文档写的比较简陋一些,好多核心功能没有详细说明,比如include-points,怎样做到类似滴滴那种将所有坐标点都展示在视野范围内呢;

1.如果不设置中心点latitude、longitude会有不能展现到视野内的问题;所以先要计算两点之间的中心点:

var lat = (that.data.from_latitude + that.data.to_latitude) / 2;
var lng = (that.data.from_longitude + that.data.to_longitude) / 2;
然后再把起始点和终点的坐标以数组的格式传入include-points这个属性,这样就可以使起始点和终点之间的连线都展示在视野范围内了;

需要注意的是include-points属性可以通过计算所有点的最大矩形左下经纬度&右上经纬度来设置,这样可以减小setData的数据。因为小程序setData的数据传输有1M的限制,就是说include-points属性不可以传入过多的坐标点,目前我是只传入了起始点和终点的坐标,但是也有的把连线的坐标点都传入了进去,看个人需求吧,只要能达到效果,过程不重要;

2.还有一个办法是使用小程序的API:mapCtx.includePoints方法

var mapCtx = wx.createMapContext("map");
mapCtx.includePoints({
      padding: [ 70,],
      points: [{
        latitude: that.data.from_latitude,
        longitude: that.data.from_longitude
      }, {
        latitude: that.data.to_latitude,
        longitude: that.data.to_longitude
      }]
    })
不管是哪个方法都需要计算两点之间的中心点,这样才能确保所有的坐标点都在视野内;
by: qiuqiu

免责声明:文章转载自《微信小程序地图组件中的include-points怎样缩放视野并将所有坐标点在规定的视野内展示?》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Twisted框架学习Visual C# 制作DLL文件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaScript单元测试工具-Jest

标注: 首先这并不是一篇完整的关于Jest的教程,只是个人在接触jest学习的一点随手笔记,大部分内容都是对官方文档的一些翻译。 ------------------------------------------------------------------------------------------------------------------...

省市区三级联动jquery插件 city-picker与百度地图API联动小案例

city-picker  插件是开源中国一个很好用的三级联动菜单 单独使用city-picker : <body> <div id="r-result"> 请输入:<input type="text" size="20" /> </body> <script type="...

2020centos解决“nginx 403 Forbidden"错误的故事

最近折腾一个放在日本的vps,网速还可以,就是经常丢包。 原本配置了Nginx的做代理服务器,我想反正服务器空闲者,放点我自己的资料 配置了一个静态html文件,方便自己随时查看 结果,不停的修改nginx的配置文件,还是报同样的错误 nginx 403 Forbidden。 网上搜,都是说是改文件夹的权限 有更粗暴的用root作为启动用户,那真实饮鸩止渴...

一篇文章教会你创建vue项目和使用vue.js实现数据增删改查

【一、项目背景】 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品、修改商品价格、删除商品、查询商品,我们应该关注这些数据的操作和处理。 【二、项目目标】 主要有以下5个目标: 1、如何创建vue项目。 2、数据添加方法:获取到id和name在data上面获取,组织一个对象,把对象通过数组的相关方法,添加到当前dat...

数据挖掘:理论与算法(导论)

清华大学研究生公开课 数据挖掘是数据科学,是多领域交叉学科:数据挖掘 = 机器学习 + 人工智能 + 模式识别 + 统计学 数据挖掘的广泛应用: Business Intelligence Data Analytics Big Data Decision Support Customer Relationship Management "Educatio...

uni-app 开发小程序 预览包过大

使用vue-cli 搭建的项目,在npm run dev:mp-weixin  进行开发时,微信开发工具,预览小程序时,提示开发包过大,无法预览。 此时是因为在开发环境中没有对代码进行压缩! 此时修改vue.config.js 文件的配置项、 修改之后,再次运行 npm run dev:mp-weixin ,此时项目代码包就变小了。...