代码之家 › 专栏 › 技术社区 › Nancy

如何添加我的位置按钮在谷歌地图使用角度谷歌地图?

angular-google-maps location google-maps

0

Nancy · 技术社区 · 7 年前

<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 回复 | 直到 7 年前

1

2

Vadim Gremyachev 7 年前

首先,googlemapsapi v3没有提供任何 默认控件 对于“显示我的位置”,所以唯一的选择是实现自己的位置。但是你可以利用一个现成的控件,而不是从头开始创建它。 klokantech.GeolocationControl

下面是一个如何将其集成到Angular 2+应用程序的说明 Angular Google Maps :

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) 初始化组件中:

app.component.html:

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

应用程序组件.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 动态地,下面提供了如何通过 脚本JS 包裹:

npm i scriptjs

和 type definitions 对于 脚本JS

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