添加夜间叠加到谷歌地图api [英] Adding night overlay to google maps api

问题描述

我的angluar项目中有以下一点html

I have the following bit of html in my angluar project

<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进行日夜行。

This plots my longitude and latitude points on a google map. Over this I wish to have a day night line only using the html.

可能会添加如下内容：

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

可以解决这个问题

以某种方式引用元素。

where map is referencing the element somehow.

这绘制了我的谷歌地图以及我的纬度和经度点。我希望在地图上添加白天和黑夜的叠加层我尝试使用github中的nite-overlay 此处但是这不适用于html，而是适用于javascript。我的问题是有什么我可以添加到html与可能agm覆盖，以使地图上显示日夜位置。请注意，由于纬度和经度的变化，此html将每隔15秒刷新一次。所以更新日期值应该不是问题。 Thx

This plots my google map along with my latitude and longitude points. I wish to add overlay that has the day and night on the map I tried using nite-overlay from github here however this is not for html, but for javascript. My question is is there something I can add to the html with maybe agm-overlay to make day and night position shown on the map. Note that this html will be refreshing every 15seconds on account of changes to the latitude and longitude. So updating the day value should not be a problem. Thx

编辑：我可以添加到我的components.ts但是我想继续使用< agm>具有lat和long的地图的组件。

I am ok with added things to my components.ts but I would like to keep using the < agm > components for the map with lat and long.

推荐答案

使用你建议的js覆盖nite（即 https://github.com/rossengeorgiev/nite-overlay ）可以使用（mapReady）=成功地与agm-map一起使用mapReady（$ event）。

The nite overlay using the js suggested by you (i.e. https://github.com/rossengeorgiev/nite-overlay) can be successfully used with agm-map using (mapReady)="mapReady($event)".

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

Apart from the required step for using agm-map (I assume you are able to draw map on your page using agm-map) ensure that you have installed @types/googlemaps

npm install --save @types/googlemaps

并且，你复制了<$ c你在 src 文件夹中的$ c> nite-overlay.js 文件，你已将它包含在你的 .angular-cli中.json 这样的文件。

And, that you have copied the nite-overlay.js file in you src folder and you have included it in your .angular-cli.json file like this.

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

以下是工作代码。

map.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;
}

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

我上面的工作示例代码使用的是角度5.但角度为6以后的CLI项目使用 angular.json 而不是 .angular-cli.json 用于构建和项目配置。

My above working example code is using angular 5. But CLI projects in angular 6 onwards uses angular.json instead of .angular-cli.json for build and project configuration.

参考 - 如何在Angular 6中使用外部JS文件，了解如何在角度6中使用外部js文件。

Ref - How to use external JS files in Angular 6 for how you can used external js file in angular 6.

这篇关于添加夜间叠加到谷歌地图api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！