Question

嘿，即时通讯在ionic上我想使用Google Maps 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
});  }

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

Answer 1

从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);
        }
    });
}

但是我建议使用this插件，让用户选择自己喜欢的导航应用程序。

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

1 个答案: