如何在 ionic native google 地图中将多段线放入屏幕内

Question

我正在使用 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 进行了任何调整？

Answer 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

如何在 ionic native google 地图中将多段线放入屏幕内

How to fit the polyline inside the screen in the ionic native google map

google-maps

google-maps-android-api-2

ionic-framework

ionic3