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

如何在离子原生谷歌地图中适应屏幕内的折线

1 个答案: