百度地图之JS-API中如何让自定义覆盖物在屏幕以外隐藏

 2018年11月16日 分类:JavaScript/前端设计  评论(2)  阅读(1571)

今天收到一个需求,由于自定义的覆盖物过多,导致百度地图使用起来很卡,严重的时候会导致死机等问题。

所以,为了解决这个问题,那么需要让自定义覆盖物按需加载才行。

我们都知道,百度中的成千上万的自定义覆盖物是通过坐标来进行展示的,而且在移动和缩放地图的时候,这些自定义覆盖物还会去调整自身的坐标来适应地图的变化,所以会导致该页面或者APP卡死。

那么只能通过仅展示符合屏幕当前展示区域内坐标的自定义覆盖物,并且如果区域内覆盖物过多会通过聚合来进行展示,当地图放大后再进行屏幕内的详情展示,而再屏幕外的进行隐藏,这样会大大优化性能,接下来上代码:

首先,自定义覆盖物会实现draw方法,以达到自定义覆盖物自适应地图变化而变化;

MyCirle.prototype.draw = function () {
      // code
}

然后,我们需要每次获取到当前屏幕展示中地图的可视区域经纬度

const bs = this._map.getBounds();   //获取可视区域
const bssw = bs.getSouthWest();   //可视区域左下角
const bsne = bs.getNorthEast();   //可视区域右上角
const topLat = bsne.lat;
const bottomLat = bssw.lat;
const leftLng = bssw.lng;
const rightLng = bsne.lng;

获取到屏幕四个点的坐标后,接下来就是判断了。

wechat_app
微信公众号:webapp_club
关注一下,或许能让你获得更多前端咨询信息。
加载中...
分享中心

评论 2

评论前必须登录

  1. 测试新模板

    智言2年前 (2019-04-20)


如果你觉得本站内容对你有所帮助,比如提升你对编程方面的认识,你可以通过上面的二维码请博主喝杯咖啡,安好。

WEB前端开发部落(公众号:webapp_club)

群列表

前端初级学习群:初级Web前端学习群(后期为支付入群)
PHP初级学习群:PHP(MySQL)学习交流群
QQ群仅作为相关领域讨论平台,均提供高质量问题交流,禁止闲聊,无法接受的朋友请勿加群!
进群需要通过这里获取进群码才能进群哦!