如何在离子原生谷歌地图中将折线适合屏幕内答案

【问题标题】：How to fit the polyline inside the screen in the ionic native google map如何在离子原生谷歌地图中将折线适合屏幕内
【发布时间】：2018-10-10 06:28:21
【问题描述】：

我正在使用ionic-native-google-map 在我的 Ionic 3 应用程序中渲染地图。我已经从一些 LatLng 点渲染了一条折线。现在，我想在地图中拟合折线，这样我就可以一目了然地看到地图中的整个折线。我正在使用以下代码：

ionViewDidLoad() {
    this.platform.ready().then(() => {
      let element = this.mapElement.nativeElement;

      let latLngPointBounds = new LatLngBounds(this.routePoints);
      let mapOptions: GoogleMapOptions = {
        camera: {
          target: latLngPointBounds.getCenter(),
          zoom: 20
        },
        controls: {
          compass: true,
          myLocationButton: true,
          myLocation: true,
          zoom: true,
          mapToolbar: true
        }
      };
      this.map = GoogleMaps.create(element, mapOptions);

      this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.map.addPolyline({
          points: this.routePoints,
          'color': '#AA00FF',
          'width': 4,
          'geodesic': true
        }).then((resp) => {
          let restaurantMarkerOptions: MarkerOptions = {
            title: "Sample Title",
            position: this.routePoints[this.routePoints.length - 1],
            animation: GoogleMapsAnimation.BOUNCE
          };
          this.map.addMarker(restaurantMarkerOptions).then((marker: Marker) => {
            marker.showInfoWindow();
          });
        });
      });
    });
  }

你可以看到我已经设置了 zoom: 20，所以对于一些折线来说它非常适合。

但某些折线不适合此缩放级别。

那么，我怎样才能动态设置缩放，以便我可以始终在地图中适应完整的折线而无需放大或缩小？

是否有任何调整 LatLngBounds 来做到这一点？

【问题讨论】：

你知道怎么做吗？

标签： google-maps ionic-framework ionic3 google-maps-android-api-2

【解决方案1】：

如果您使用 ILatLng 数组，它会自动适应边界，例如：

let path: ILatLng[] = [{"lat": ..., "lng": ...},{"lat": ..., "lng": ...},..];
let latLngBounds = new LatLngBounds(path);
this.map.moveCamera({
  'target': latLngBounds
});

见：https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/class/Map/moveCamera/READMD.md#fit-camera-to-multiple-points

【讨论】：