为什么有时 google map 在 ionic 中无法正确显示?

Why some times google map doesn't fit correctly in ionic?

在 Ionic Project 的以下代码中,有时 map 不能正确地适合中心

代码:

initMap() {
    this.mapInitialised = true;
    this.bounds = new google.maps.LatLngBounds();
    this.Geolocation.getCurrentPosition().then((position) => {
      this.location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let mapOptions = {
        center: this.location,
        zoom: 15,
        draggable: true,
        backgroundColor: 'white',
        fullscreenControl: false,
        mapTypeControl: false,
        zoomControl: true,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      this.map.fitBounds(this.bounds); //# auto - zoom
      this.map.panToBounds(this.bounds);
      console.log(this.location);

      this.PostMarker(this.Postlatlng);
      this.CurrentMarker(this.location);
    });

  }
  CurrentMarker(location){
  console.log(location.lat, location.lng);
  let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: location,
    icon: image
  });
  this.bounds.extend(new google.maps.LatLng(location.lat(), location.lng()));
}

  PostMarker(location) {
    console.log(location.lat,location.lng);
    let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: location,
      icon: image
    });
    this.bounds.extend(new google.maps.LatLng(location.lat, location.lng));
  }

输出:

缩小后:

更新 正如您在屏幕的输出地图中看到的那样,是太平洋,而测试数据点是西藏的一个地方,第二个点是我目前在伊朗的位置。它没有在屏幕上显示这两个点,而是显示错误 location/area。 当两点彼此相距太远时,通常会发生此问题。在附近的位置我看到过一两次这个问题。

设置minZoom地图选项。否则,您发布的屏幕截图显示了当您缩小到 0 时 API(正确)的行为方式。

例如:

new google.maps.Map(element,{minZoom:3});