如何使用Angular谷歌地图在Google Maps中添加我的位置按钮？

Question

我正在使用有角度的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>

Answer 1

首先，Google Maps API v3没有为“显示我的位置”提供任何默认控件，因此唯一的选择就是实现自己的位置。但是您可以使用现成的控件来代替从头创建它，例如klokantech.GeolocationControl

以下是有关如何使用Angular Google Maps将其集成到Angular 2+应用程序中的说明：

1）通过将maptilerlayer库放入index.html：

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

或动态（例如使用scriptjs library：

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

}

Demo

Source code

更新

如果您希望动态加载https://cdn.klokantech.com/maptilerlayer/v1/index.js，则下面提供了如何通过scriptjs软件包执行该指令的说明：

安装软件包：

npm i scriptjs

和type definitions代表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);
});