地図上に2つの場所を表示し、自動的にこの点のズームレベルと中心をionic2に設定する方法は？

Question

マップに2つの位置を表示し、この点の中心とズームの中心をイオン2に自動的に設定したい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())); 
}