将夜间叠加层添加到谷歌地图 api

Question

我的 Angular 项目中有以下 html

<agm-map ngDraggable [latitude]="latitude" [longitude]="longitude" >
  <agm-marker *ngFor= "let post of locations.results[0].events" [latitude]="post.asnLatitude" [longitude]="post.asnLongitude" [label] ="post"> </agm-marker>
</agm-map>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=013d0299e34c52b6dfb87711021b661295b918ee&callback=initMap"
  type="text/javascript"></script>

这会在谷歌地图上绘制我的经度和纬度点。对此，我希望有一个只使用 html 的日夜行。

可能会添加类似的内容：

<script>nite.init(map)</script>

会成功的

map 以某种方式引用元素的地方。

这会绘制我的谷​​歌地图以及我的纬度和经度点。我希望在地图上添加具有白天和黑夜的叠加层，我尝试使用来自 github here 的 nite-overlay 但这不是用于 html，而是用于 javascript。我的问题是我可以添加一些东西到 html 中，也许是 agm-overlay，以便在地图上显示白天和黑夜的位置。请注意，由于纬度和经度的变化，此 html 将每 15 秒刷新一次。所以更新日值应该不是问题。谢谢

编辑：我可以在 components.ts 中添加一些东西，但我想继续使用 组件来处理具有纬度和经度的地图。

Answer 1

您可以使用 nite 包，您必须首先像这样在您的 component.ts 中从 agm 获取本机 google maps 对象：

constructor(private _mapsWrapper:GoogleMapsAPIWrapper){
    _mapsWrapper.getNativeMap().then((map: mapTypes.GoogleMap) => {
      // Here you can use the map object with the nite package
      nite.init(map);
    });
  }

PS：不要忘记导入语句：

import { GoogleMapsAPIWrapper } from '@agm/core';
import * as mapTypes from '@agm/core/services/google-maps-types';

Answer 2

使用您建议的js（即https://github.com/rossengeorgiev/nite-overlay）的nite叠加可以成功地与使用(mapReady)="mapReady($event)"的agm-map一起使用。

除了使用 agm-map 所需的步骤（我假设您可以使用 agm-map 在页面上绘制地图）之外，请确保您已安装 @types/googlemaps

npm install --save @types/googlemaps

而且，您已将 nite-overlay.js 文件复制到 src 文件夹中，并将其包含在您的 .angular-cli.json 文件中，如下所示。

...
"scripts": [
        "nite-overlay.js"
      ],
...

以下是工作代码。

ma​​p.component.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;
}

ma​​p.component.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 - How to use external JS files in Angular 6 了解如何在 Angular 6 中使用外部 js 文件。