我想在我的 Angular Web 应用程序中使用 google 地图 api
但我有这个错误 - >错误ReferenceError：谷歌未定义
我按照原始谷歌文档中的方式做了所有事情，但不幸的是它不起作用：https://developers.google.com/maps/documentation/javascript/examples/map-simple https://developers.google.com/maps/documentation/javascript/examples/map-simple
我的TS课
/// <reference types="google.maps" />
import { Component } from '@angular/core';
import {} from 'google.maps';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testapp';
constructor() { }
ngOnInit() {
initMap();
}
}
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
我的 html 类
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=MyAPIKEY&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
在 Google 地图 api 可用之前，您的 index.js 正在被解析。两种选择：
动态加载https://www.npmjs.com/package/@googlemaps/js-api-loader https://www.npmjs.com/package/@googlemaps/js-api-loader
import {Loader} from "@googlemaps/js-api-loader";
// ... removed
constructor() { }
ngOnInit() {
const loader = Loader({apiKey: ''}).load().then(initMap);
}
}
更改脚本解析顺序
或者，删除异步/回调并将 Google 地图脚本放置在 index.js 之上。 （此阻塞直到资源被加载。）
<script src="https://maps.googleapis.com/maps/api/js?key=MyAPIKEY&v=weekly"></script>
<script src="./index.js"></script>
...
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
