Как разместить полилинию внутри экрана в ионной карте Google - PullRequest
Новая
       11

Как разместить полилинию внутри экрана в ионной карте Google

0 голосов
/ 30 апреля 2018

Я использую 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();
          });
        });
      });
    });
  }

Вы можете видеть, что я установил зум: 20 , поэтому для некоторой полилинии он прекрасно подходит. enter image description here

Но некоторые полилинии не подходят для этого уровня масштабирования.

enter image description here

Итак, как я могу динамически установить масштаб, чтобы я всегда мог уместить всю полилинию на карте без увеличения или уменьшения масштаба?

Есть ли какая-либо настройка LatLngBounds для этого?

1 Ответ

0 голосов
/ 17 июня 2018

если вы используете массив 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

...