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

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

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

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

我们都知道,百度中的成千上万的自定义覆盖物是通过坐标来进行展示的,而且在移动和缩放地图的时候,这些自定义覆盖物还会去调整自身的坐标来适应地图的变化,所以会导致该页面或者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
关注一下,或许能让你获得更多前端咨询信息。
加载中...

评论 抢沙发

评论前必须登录!