gpt4 book ai didi

angular - 在 AGM map 之前加载 googlemaps api

转载 作者:行者123 更新时间:2023-12-01 01:43:33 25 4
gpt4 key购买 nike

我正在尝试独立于 AGM map 模块加载谷歌地图 API。我正在尝试这样做,因为在某些情况下,我想在不使用 AGM 模块的情况下访问 Google Maps API。例如,如果我想加载街景,我需要调用 Google Maps 服务,我希望 API 已经加载并准备好使用。出现问题是因为 app.module 中的 AgmCoreModule 负责加载 Google API,如下所示:

    AgmCoreModule.forRoot({
apiKey: 'API_KEY',
libraries: ['places', 'drawing', 'geometry']
})

这适用于使用 AGM 组件加载 map 。该脚本附加到 index.html 文件中,一切正常。但是,如果我想在没有实例化 map 的情况下访问 Google Maps API,则 AGM 模块没有附加 Google API 脚本并且“google”未定义。

有没有一种方法可以在不使用 AgmCoreModule 上的 forRoot() 函数的情况下加载 Google Maps API?

最佳答案

我也通过使用 MapsApiLoader 服务解决了这个问题。我需要创建 HealtMap,但 @agm/core 没有支持,然后我用它来加载 googleMapsApi 并创建 map 。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';

import { environment } from 'environments/environment';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: environment['apiKeyMaps'],
libraries: ['visualization'],
}),
],
providers: [
GoogleMapsAPIWrapper,
],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html
<div #gmap class="map-heat-container" style="height: 500px; width: 500px"></div>

app.component.ts
import { Component, ViewChild, AfterContentInit } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

declare var google: any;

interface Marker {
lat: number;
lng: number;
}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterContentInit {

@ViewChild('gmap') gmapElement: any;

map: google.maps.Map;
heatmap: google.maps.visualization.HeatmapLayer;

constructor(
private mapsApiLoader: MapsAPILoader,
) { }

ngAfterContentInit(): void {
this.mapsApiLoader.load().then(() => {
this.initMap();
});
}

initMap() {
this.map = new google.maps.Map(this.gmapElement.nativeElement, {
zoom: 3.5,
center: new google.maps.LatLng(-14, -54),
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoomControl: false,
streetViewControl: false,
disableDefaultUI: true,
});

this.heatmap = new google.maps.visualization.HeatmapLayer({
data: this.getPoints(),
map: this.map,
});
}

getPoints() {
// create points
let markers: Marker[] = [
{ "lat": -23, "lng": -46 }, { "lat": -24, "lng": -53 }, { "lat": -23, "lng": -46 }
];

// transforming points
return markers.map(point =>
new google.maps.LatLng(point.lat, point.lng));
}
}

我需要安装 @type/googlemaps 并将 googlemaps 添加到 tsconfig.json 以在 app.component.ts 中使用 var google

tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": [
"googlemaps"
]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}

演示: StackBLitz

关于angular - 在 AGM map 之前加载 googlemaps api,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53728655/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com