• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

开发微信小程序过程中运用到了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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
那些年小程序的坑发布时间:2022-07-18
下一篇:
命令行翻译推荐一个linux系统中可用的终端小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap