Question

我正在使用google-map-react在我的反应应用程序中渲染地图。我在地图上显示动态数量的标记。我需要适合地图的视图，以便它只包含所有标记。我经历了这thread但发现它有点复杂。任何人都可以概述一下如何做到这一点？

Answer 1

碰巧我最近必须做同样的事情。我发现现有的libs比实际帮助更多，所以我只是编写自己的组件。

如果您决定采用相同的方式 - 这里是如何做您想做的事情：

首先 - 您需要获取包含所有标记的bounds对象。这里我们假设this.state.markers包含google.maps.Marker个对象

的数组

您的组件可以使用以下方法：

  getObjectsBounds(){

    let objectsBounds = new google.maps.LatLngBounds();

    Object.values(this.state.markers).map((marker) => {
      let lat   = parseFloat(marker.getPosition().lat());
      let long  = parseFloat(marker.getPosition().lng());
      let point = new google.maps.LatLng(lat, long);
      objectsBounds.extend(point);
    });

    return objectsBounds;
  }

现在我们只使用fitBounds来获得上述功能的返回结果。这里我们假设this.map是你的gmap，即google.maps.Map( ... your args ... )返回的内容。

  fitBounds(){
    let bounds = this.getObjectsBounds();
    this.map.fitBounds(bounds);
  }

如何使谷歌地图适合标记＆＃39;？

1 个答案: