Я использую угловые карты Google в своем приложении Angular 4.Я пытаюсь получить указания от точки к другой точке, используя директиву.
Вот исходный код директивы,
import { Directive, Input, OnInit } from '@angular/core';
import {GoogleMapsAPIWrapper} from '@agm/core';
declare let google: any;
@Directive({
selector: '[appDirection]'
})
export class DirectionDirective implements OnInit {
@Input() org;
@Input() dst;
constructor(private gmApi: GoogleMapsAPIWrapper) { }
ngOnInit() {
console.log(' In directive ');
this.gmApi.getNativeMap().then(map => {
const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
directionsService.route({
origin: {lat: this.org.latitude, lng: this.org.longitude},
destination: {lat: this.dst.latitude, lng: this.dst.longitude},
waypoints: [],
optimizeWaypoints: true,
travelMode: 'TRANSIT'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
});
}
}
И я добавил это в app.module.ts в массиве объявлений,Я использую эту директиву в другом компоненте, внутри компонента я определяю org и dst следующим образом:
showDirections( ) {
const dst = {longitude: this.point.longitude, latitude: this.point.latitude};
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
const org = { latitude: position.coords.latitude, longitude: position.coords.longitude};
console.log('Src ' + org.latitude );
});
}
console.log('Dst' + dst.latitude );
}
Я вызываю вышеуказанную функцию, когда пользователь нажимает кнопку.
HTML-код длякомпонент выглядит следующим образом:
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" appDirection [org]="org" [dst]="dst">
<agm-marker [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
Я применяю директиву в качестве атрибута к карте agm.
Когда я нажимаю на кнопку, которая устанавливает org и dst, тогда направление должно отображаться наAGM-карта.Но никаких направлений в настоящее время не отображается.Пожалуйста, поправьте меня, где я не прав.Заранее спасибо.
Теперь я получаю сообщение об ошибке следующим образом:
TypeError: Cannot read property 'latitude' of undefined
org и dst не определены в директиве, но они установлены в компоненте.