[英]Adding night overlay to google maps api
我的angluar項目中有以下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>
這會在Google地圖上繪制我的經度和緯度點。 關於這一點,我希望只使用html來安排白天的活動。
也許添加類似:
<script>nite.init(map)</script>
會做到的
map在哪里以某種方式引用了元素。
這會繪制我的Google地圖以及我的緯度和經度點。 我希望在地圖上添加具有白天和黑夜的疊加層,我在這里嘗試使用來自github的nite-overlay,但這不是針對html的,而是針對javascript的。 我的問題是,我可以添加一些帶有agm-overlay的內容以使白天和黑夜的位置顯示在地圖上。 請注意,由於緯度和經度的更改,此html將每15秒刷新一次。 因此,更新日值應該不是問題。 謝謝
編輯:我可以在我的components.ts中添加一些東西,但是我想繼續使用<agm>組件來放置經緯度和經度的地圖。
使用您建議的js的Nite疊加層(即https://github.com/rossengeorgiev/nite-overlay )可以通過(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"
],
...
以下是工作代碼。
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的更新
我上面的工作示例代碼使用的是angular.json
但是從.angular-cli.json
6開始的CLI項目使用angular.json
而不是.angular-cli.json
進行構建和項目配置。
參考- 如何在Angular 6中使用外部JS文件,以了解如何在Angular 6中使用外部JS文件。
您可以使用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';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.