рисуя путь между двумя маркерами на ионике 3 - PullRequest
Новая
       10

рисуя путь между двумя маркерами на ионике 3

0 голосов
/ 27 августа 2018

Эй, я новичок в ионике. Я хотел нарисовать путь между двумя маркерами (двумя точками), используя API Google Maps, но я заблокирован этим куском кода. Хорошо, увидев много учебников, я не могу найти никакой документации о рисовании маршрутов, поскольку их хранилище 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
});  }

enter image description here

что мне делать в этом случае я не могу понять источник ошибки

1 Ответ

0 голосов
/ 27 августа 2018

Из документации , преобразованной из 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);
        }
    });
}

Однако я рекомендую этот плагин , который позволяет пользователю выбрать свое любимое навигационное приложение.

...