使用您建议的 js 的 nite 覆盖(即https://github.com/rossengeorgiev/nite-overlay https://github.com/rossengeorgiev/nite-overlay) 可以成功地与 agm-map 一起使用(mapReady)="mapReady($event)"
.
除了使用 agm-map 所需的步骤(我假设您可以使用 agm-map 在页面上绘制地图)之外,请确保您已安装@types/googlemaps
npm install --save @types/googlemaps
并且,您已复制nite-overlay.js
文件在你里面src
文件夹,并且您已将其包含在您的.angular-cli.json
像这样的文件。
...
"scripts": [
"nite-overlay.js"
],
...
以下是工作代码。
地图组件.ts
import { Component, OnInit, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import {} from '@types/googlemaps';
declare var google: any;
declare var nite: any;
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
lat: number = 26.288644;
lng: number = 73.021302;
zoom = 4;
m: Marker = {lat:this.lat, lng:this.lng};
constructor(
private loader: MapsAPILoader,
private zone: NgZone
) { }
clickedMarker(label: string, index: number) {
console.log(`clicked the marker: ${label || index}`)
}
mapClicked($event: any) {
let m: Marker = {lat:$event.coords.lat, lng:$event.coords.lng};
this.m = m;
this.getAddress(m.lat, m.lng, this.setAddress.bind(this));
}
markerDragEnd(m: Marker, $event: MouseEvent) {
console.log('dragEnd', m, $event);
}
mapReady($event: any) {
nite.init($event);
}
ngOnInit() {
}
}
// just an interface for type safety.
interface Marker {
lat: number;
lng: number;
label?: string;
draggable?: boolean;
}
地图组件.html
<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false" [zoom]="zoom" (mapClick)="mapClicked($event)" (mapReady)="mapReady($event)">
<agm-marker *ngIf="m" [latitude]="m.lat" [longitude]="m.lng" ></agm-marker>
</agm-map>
关于如何在 Angular 6 中导入 js 的更新
我上面的工作示例代码使用的是 Angular 5。但是 Angular 6 及以上的 CLI 项目使用angular.json
代替.angular-cli.json
用于构建和项目配置。
Ref - 如何在 Angular 6 中使用外部 JS 文件 https://stackoverflow.com/questions/50842115/how-to-use-external-js-files-in-angular-6了解如何在 Angular 6 中使用外部 js 文件。