Как показать маршруты на угловых картах Google от текущего местоположения
Я использую угловые карты Google в своем угловом веб-приложении. Я хочу показать направление от текущего местоположения пользователя до маркера, содержащего дополнительные местоположения. В моем веб-приложении у маркера есть несколько под-местоположений, идентифицированных с использованием широты и lng. Поэтому, когда пользователь нажимает на эти дополнительные местоположения, должны быть показаны указания от текущего местоположения пользователя.
Я установил компонент agm-direction и включил его в app-module.ts.
В настоящее время мой HTML-файл имеет
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
<agm-marker *ngFor="let marker of coordinates; let i = index"
[iconUrl]="icon"
[latitude]="marker.latitude"
[longitude]="marker.longitude"
[markerClickable]="true"
(markerClick)="markerClicked(marker.latitude,marker.longitude)">
<agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400">
<ng-template>
<mat-card>{{ pLocationId }} {{ pLocationName }}</mat-card><br/>
<mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
<mat-grid-tile [colspan]="4" [rowspan]=2 *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
[style.padding-right]="20">
<mat-grid-tile-header [style.height]="30">{{i+1}}</mat-grid-tile-header>
<div [style.background]="orange">
<i class="material-icons">motorcycle</i>
<span [style.color]="white" >{{cycle.qrCode}}</span><br/>
<br/>
<i class="material-icons">battery_alert</i>
<span>{{ cycle.batteryLevel }}</span>
</div>
<mat-grid-tile-footer [style.background]="yellow">
<button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
<mat-icon>navigation</mat-icon>
</button>
</mat-grid-tile-footer>
</mat-grid-tile>
</mat-grid-list>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
<agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
</agm-map>
И в файле TS,
showDirection(dirLat: any, dirLng: any) {
let srcLat, srcLng;
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
srcLat = position.coords.latitude;
srcLng = position.coords.longitude;
});
}
this.dir = {
origin: { latitude: srcLat, longitude: srcLng },
destination: { latitude: dirLat, longitude: dirLng }
};
this.show = true;
console.log('Nav button clicked');
}
Но ожидаемое поведение не приходит. Приложение не показывает направления и даже вывод на консоль,
Нажата кнопка навигации
тоже не придет. Пожалуйста, поправьте меня, где я не прав.
НОВОЕ РЕДАКТИРОВАНИЕ,
Добавлен тег внутри, теперь вывод на консоль идет, но направление не отображается.
Вот новый отредактированный HTML,
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
<agm-marker *ngFor="let marker of coordinates; let i = index"
[iconUrl]="icon"
[latitude]="marker.latitude"
[longitude]="marker.longitude"
[markerClickable]="true"
(markerClick)="markerClicked(marker.latitude,marker.longitude)">
<agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400">
<ng-template>
<mat-card>{{ pLocationId }} {{ pLocationName }}</mat-card><br/>
<mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
<mat-grid-tile [colspan]="4" [rowspan]=2 *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
[style.padding-right]="20">
<mat-grid-tile-header [style.height]="30">{{i+1}}</mat-grid-tile-header>
<div [style.background]="orange">
<i class="material-icons">motorcycle</i>
<span [style.color]="white" >{{cycle.qrCode}}</span><br/>
<br/>
<i class="material-icons">battery_alert</i>
<span>{{ cycle.batteryLevel }}</span>
</div>
<mat-grid-tile-footer [style.background]="yellow">
<button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
<mat-icon>navigation</mat-icon>
</button>
</mat-grid-tile-footer>
</mat-grid-tile>
</mat-grid-list>
</ng-template>
</agm-snazzy-info-window>
<agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
</agm-marker>
</agm-map>
2 ответа
Взгляни на <tcodeid="48594890"></tcodeid="48594890">.
Это новая библиотека с открытым исходным кодом, которая предоставляет множество интересных функций прямо из коробки. В частности, с направлениями, вероятно, самая крутая функция позволяет разработчикам использовать свои наложения (например, маркеры, многоугольники и т. Д.) Непосредственно в качестве мест и путевых точек, наряду со многими другими гибкими типами. Больше никакого ручного труда ...
Вот пример из документации:
<bs-google-map *bsSafe ...>
<bs-google-maps-marker [position]="someCoord" #marker="marker"></bs-google-maps-marker>
<bs-google-maps-polygon [path]="somePath" #polygon="polygon"></bs-google-maps-polygon>
<bs-google-maps-directions [through]="[marker, polygon, 'Jerusalem', [31.9, 34.7], { lat: 31.99, lng: 35 }, 'Tel Aviv']"></bs-google-maps-directions>
</bs-google-map>
Полные документы направления | пакет npm | Официальный сайт и демонстрации
this.dir = {источник: {широта: srcLat, долгота: srcLng }, пункт назначения: {широта: dirLat, долгота: dirLng } };
вы должны использовать:
this.dir = {
origin: { lat: srcLat, lng: srcLng },
destination: { lat: dirLat, lng: dirLng }
};