- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我的 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 的 map 上添加具有白天和黑夜的叠加层然而,这不是针对 html,而是针对 javascript。我的问题是,我是否可以使用 agm-overlay 添加到 html 中,使日夜位置显示在 map 上。请注意,由于纬度和经度的变化,此 html 将每 15 秒刷新一次。所以更新日值应该不是问题。谢谢
编辑:我可以在我的 components.ts 中添加一些东西,但我想继续使用 < agm > 组件来制作经纬度 map 。
最佳答案
使用您建议的 js(即 https://github.com/rossengeorgiev/nite-overlay)的 nite overlay 可以使用 (mapReady)="mapReady($event)"
成功地与 agm-map 一起使用。
除了使用 agm-map 所需的步骤(我假设您能够使用 agm-map 在您的页面上绘制 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 5。但是从 angular 6 开始的 CLI 项目使用 angular.json
而不是 .angular-cli.json
来构建和项目配置。
引用 - How to use external JS files in Angular 6了解如何在 Angular 6 中使用外部 js 文件。
关于javascript - 将夜间叠加层添加到谷歌地图 api,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51104491/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!