web高德地图自适应海量点标记, 调整视角

在官方示例中setFitView()对AMap.Marker可以生效,但是对海量点标记 AMap.MassMarks 貌似不行,所以搞了另一种方法;

Map类有一个方法setBounds也能实现重新调整视角

https://lbs.amap.com/api/javascript-api/reference/map
在这里插入图片描述

    const sw = getSW(markerList) // 循环所有的点标记,返回最西南的一个经纬度
    const ne = getNE(markerList) // 循环所有的点标记,返回最东北的一个经纬度
    console.log('GET BOUNDS', sw, ne) // [xxx,xxx], [xxx,xxx]
    let mybounds = new AMap.Bounds(sw, ne)
    this.map.setBounds(mybounds)

以下是自定义的函数,返回最西南、最东北坐标,自行修改

/**
 * 坐标集合的最西南角
 * @param {*} list
 *  list 是接口获取的点 的数组
 */
export const getSW = (list) => {
  let south = null
  let west = null
  for (let item of list) {
    if ((west && item.longitude < west) || !west) {
      west = item.longitude - 0.7
    }
    if ((south && item.latitude < south) || !south) {
      south = item.latitude - 0.7
    }
  }
  return [west, south]
}

/**
 *  最东北角
 * @param {*} list
 */
export const getNE = (list) => {
  let north = null
  let east = null
  for (let item of list) {
    if ((east && item.longitude > east) || !east) {
      east = item.longitude + 0.7
    }
    if ((north && item.latitude > north) || !north) {
      north = item.latitude + 0.7
    }
  }

  return [east, north]
}

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值