百度地图根据标注或覆盖物自适应显示地图,根据提供的地理区域或坐标获得最佳的地图视野

百度地图根据标注或覆盖物自适应显示地图,根据提供的地理区域或坐标获得最佳的地图视野

  • 起因
  • 1、应用场景
  • 2、实现

起因

项目要求进入地图界面就显示所有的监控目标,然后需要正好一屏自适应显示,网上找了一堆要么就是自己实现,一大堆代码,要么就说的不是同一个东西,最后还是在百度地图的API中找到了对应办法。

1、应用场景

有时候需要正好能一屏显示某些标注或覆盖物而不需要用户再去自己移动,不能过大也不能过小,太小了则无法显示全部的目标,太大了则会如下图,太过空旷,所以这时候就需要根据现实的目标来调整中心点和经纬度了。

2、实现

使用百度地图的接口:getViewport(view: Array, viewportOptions: ViewportOptions)

    /**
     * @name: 根据点的数组设置合适的地图视野,正好可以显示数组里的所有点的位置
     * @param {Array} pointArr 百度地图点(Point)对象数组
     */
    setMapView (pointArr) {
      // this.map为地图对象
      let mapViewObj = this.map.getViewport(pointArr);
      this.map.centerAndZoom(mapViewObj.center, mapViewObj.zoom)
    },

getViewport方法返回内容如下。
百度地图根据标注或覆盖物自适应显示地图,根据提供的地理区域或坐标获得最佳的地图视野_第1张图片
效果如下图

你可能感兴趣的:(百度地图,前端)