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

Question

我正在使用 angular 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 没有为 "show my location" 提供任何 默认控件 ，因此唯一的选择是实施你自己的。但是您可以使用现成的控件，而不是从头开始创建它，例如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);
});

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

How to add my location button in Google Maps using Angular google maps?

location

google-maps

angular-google-maps