我的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>
这会在谷歌地图上绘制我的经度和纬度点.在此我希望只使用html进行日夜行.
也许添加如下内容:
<script>nite.init(map)</script>
会做的伎俩
map以某种方式引用元素.
这绘制了我的谷歌地图以及我的纬度和经度点.我希望在地图上添加白天和黑夜的叠加层我尝试使用github here中的nite-overlay但是这不适用于html,而是适用于javascript.我的问题是有什么我可以添加到html与可能agm覆盖,以使地图上显示日夜位置.请注意,由于纬度和经度的变化,此html将每隔15秒刷新一次.所以更新日期值应该不是问题.谢谢
编辑:我可以添加到我的components.ts的东西,但我想继续使用< agm>具有lat和long的地图的组件.
最佳答案 使用你建议的js(即
https://github.com/rossengeorgiev/nite-overlay)的nite overlay可以使用(mapReady)=“mapReady($event)”成功地与agm-map一起使用.
除了使用agm-map所需的步骤(我假设你能够使用agm-map在你的页面上绘制地图),确保你已经安装了@ types / googlemaps
npm install --save @types/googlemaps
并且,您已经在您的src文件夹中复制了nite-overlay.js文件,并且已将其包含在.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的更新
我上面的工作示例代码使用的是角度5.但角度为6以后的CLI项目使用angular.json而不是.angular-cli.json进行构建和项目配置.
Ref – How to use external JS files in Angular 6如何在角度6中使用外部js文件.