Как добавить кнопку моего местоположения в Google Maps, используя Angular google maps? - PullRequest
Новая
       25

Как добавить кнопку моего местоположения в Google Maps, используя Angular google maps?

0 голосов
/ 26 октября 2018

enter image description here

Я использую угловые карты Google для отображения карт и маркеров. Можно ли отобразить значок в правом нижнем углу карты, который при нажатии показывает текущее местоположение. 

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
  <agm-marker *ngFor="let m of mapArrayList; let i = index" 
    [latitude]="m.geometry.location.lat()" [longitude]="m.geometry.location.lng()" 
    >

  </agm-marker>
</agm-map>

1 Ответ

0 голосов
/ 28 октября 2018

Прежде всего, Google Maps API v3 не предоставляет никакого элемента управления по умолчанию для «показать мое местоположение», поэтому единственным вариантом будет реализация вашего собственного.Но вместо того, чтобы создавать его с нуля, вы можете использовать готовый элемент управления, например klokantech.GeolocationControl

Вот инструкция о том, как интегрировать его в приложение Angular 2+ с помощью AngularGoogle Maps :

1) загрузить библиотеку maptilerlayer, поместив ее в index.html: 

<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>

или динамически, например, используя библиотеку scriptjs : 

get('https://cdn.klokantech.com/maptilerlayer/v1/index.js', () => {

});

2) инициализировать klokantech.GeolocationControl в компоненте:

app.component.html: 

<agm-map #map [streetViewControl]=false [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapReady)="mapLoad($event)">
</agm-map>

app.component.js 

export class AppComponent {
  lat = -25.91;
  lng = 145.81;
  zoom = 4;

  protected mapLoad(map) {
    this.renderGeolocationControl(map);
  }

  renderGeolocationControl(map) {
    get('https://cdn.klokantech.com/maptilerlayer/v1/index.js', () => {
      const geoloccontrol = new klokantech.GeolocationControl(map, 18);
      console.log(geoloccontrol);
    });
  }

}

Демо

Исходный код

Обновление

В случае, если выпредпочитаете загружать https://cdn.klokantech.com/maptilerlayer/v1/index.js динамически, ниже приведена инструкция, как выполнить его через scriptjs пакет:

Установить пакет: 

npm i scriptjs

и определения типа для scriptjs: 

npm install --save @types/scriptjs

Затем импортируйте $script.get() метод: 

import { get } from 'scriptjs';

и, наконец, загрузите библиотеку: 

get('https://cdn.klokantech.com/maptilerlayer/v1/index.js', () => {
  const geoloccontrol = new klokantech.GeolocationControl(map, 18);
});
...