如何使用Angular谷歌地图在Google Maps中添加我的位置按钮? [英] How to add my location button in Google Maps using Angular google maps?

问题描述

我正在使用有角度的Google地图来显示地图和标记.是否可以在地图的右下角显示图标，单击该图标可以显示当前位置.

I am using angular google maps to display maps and markers. Is it possible to show the icon in the bottom right corner of the map that on click of it shows the current location.

<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>

推荐答案

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

First of all, Google Maps API v3 does not provide any default control for "show my location", so the only option would be implementing your own. But instead of creating it from scratch you could utilize a ready made control, e.g. klokantech.GeolocationControl

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

Here is an instruction on how to integrate it into Angular 2+ application using Angular Google Maps:

1)通过将maptilerlayer库放入index.html:

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

或动态地，例如使用 scriptjs库:

or dynamically, for example using scriptjs library:

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

});

2)在组件中初始化klokantech.GeolocationControl:

2)initialize klokantech.GeolocationControl in component:

app.component.html:

app.component.html:

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

app.component.js

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软件包执行该指令的说明:

In case if you prefer to load https://cdn.klokantech.com/maptilerlayer/v1/index.js dynamically, below is provided the instruction how to perform it via scriptjs package:

安装软件包:

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

这篇关于如何使用Angular谷歌地图在Google Maps中添加我的位置按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！