在离子3上绘制两个标记之间的路径

Posted 2021-04-02

嘿我是离子的新手我想用谷歌地图api在两个标记之间绘制一条路径（两点）但我用这段代码阻止了通过看到很多教程我找不到任何关于路线绘图的文档离子他们的github存储库从未提及路线图我认为它不受支持。

  loadMap() {

let mapOptions: GoogleMapOptions = {
  camera: {
    target: {
      lat: this.agence.latitude,
        //43.0741904,
      lng: this.agence.longitude,
        //-89.3809802
    },
    zoom: 14,
    tilt: 30
  }
};

this.map = GoogleMaps.create('map', mapOptions);

let marker: Marker = this.map.addMarkerSync({
  title: 'Radeema'+this.agence.nom,
  icon: 'red',
  animation: 'DROP',
  position: {
    lat: this.agence.latitude,
    lng: this.agence.longitude
  }
});
let positionMarker: Marker = this.map.addMarkerSync({
  title: 'votre position',
  icon: 'blue',
  animation: 'DROP',
  position: {
    lat: this.latitude,
    lng: this.longitude,

  }
});
this.map.addMarker({
  title: 'votre position',
  icon: 'green',
  animation: 'DROP',
  position: {
    lat: this.latitude,
    lng: this.longitude,
  }
})

let directionsService = new google.maps.DirectionsService;
let directionsDisplay = new google.maps.DirectionsRenderer;




directionsService.route({
  origin:{"lat": this.latitude, "lng": this.longitude} ,
  destination:      {"lat": this.agence.latitude, "lng": this.agence.longitude},

  travelMode: google.maps.TravelMode['DRIVING']
}, (res, status) => {

  if(status == google.maps.DirectionsStatus.OK){
    directionsDisplay.setDirections(res);
  } else {
    console.warn(status);
  }

});
this.map.addPolyline({
  points:  [
 {"lat": this.latitude, "lng": this.longitude},
 {"lat": this.agence.latitude, "lng": this.agence.longitude},

],
  'color' : '#fff51e',
  'width': 10,
  'geodesic': true
});  }

在这种情况下我该怎么办我无法理解错误的来源

答案

从documentation，从js转换为ts：

private directionService = new google.maps.DirectionsService;
private directionsDisplay = new google.maps.DirectionsRenderer;

initMap() {
    let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: { lat: 41.85, lng: -87.65 }
    });
    this.directionsDisplay.setMap(map);
}


onChangeHandler() { // use this function in your dom or in your code when you want to dislpay the route
    calculateAndDisplayRoute();
};

calculateAndDisplayRoute() {
    this.directionsService.route({
        origin: userLocation,
        destination: agenceLocation,
        travelMode: 'DRIVING'
    }, (response, status) => {
        if (status === 'OK') {
            this.directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

但是我推荐qazxsw poi插件让用户选择他最喜欢的导航应用程序。