如何在地图中显示两个位置，并在 ionic2 中自动设置此点的缩放级别和中心

Question

我想在地图上显示两个带有标记的位置，并在离子 2 中自动设置该点的缩放级别和中心此代码同时显示 2 个不同的点和标记，但如果我的position在此标记位置之外，它们将不会显示在canvas

initializeMap() {
let minZoomLevel = 12;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
        this.OriginMarker(this.start_point);
        this.TargetMarker(this.end_point);
});
}
OriginMarker(data){  
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng, icon: image
  }); 
}
TargetMarker(data) {
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
    let image = 'assets/img/Untitled-2.png';
    let marker = new google.maps.Marker({
     map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng , icon: image
  }); 
}

Answer 1

试试这个：-

bounds: any;
    this.bounds = new google.maps.LatLngBounds();
        createMarker(latitude:number,longitude:number) {
            let latLng = new google.maps.LatLng(latitude, longitude);
            var marker = new google.maps.Marker({
              position: latLng,
              map: this.map,
              title: "title"
            });
            this.bounds.extend(new google.maps.LatLng(marker.position.lat(), marker.position.lng()));
          }

您的代码：

bounds: any;
initializeMap() {
let minZoomLevel = 12;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
 this.bounds = new google.maps.LatLngBounds();
var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
        this.OriginMarker(this.start_point);
        this.TargetMarker(this.end_point);
   this.map.fitBounds(this.bounds); //# auto - zoom
          this.map.panToBounds(this.bounds); //# auto-center
});
}
OriginMarker(data){  
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng, icon: image
  }); 
    this.bounds.extend(new google.maps.LatLng(marker.position.lat(), marker.position.lng()));
}
TargetMarker(data) {
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
    let image = 'assets/img/Untitled-2.png';
    let marker = new google.maps.Marker({
     map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng , icon: image
  }); 
  this.bounds.extend(new google.maps.LatLng(marker.position.lat(), marker.position.lng()));
}