我正在尝试将Javascript google maps合并到我的Angular 8项目中，以添加比AGM更多的功能。我创建了一个 typings.d.ts 文件并将我的 javascript 包含在 angular.json 中，但我仍然收到错误：">map"已声明，但其值从未被读取。这是我的代码...
组件.html
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}&callback=initMap"
async defer>
</script>
<script >
</script>
</body>
</html>
组件.ts
import * as map from 'map';
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-google-maps',
templateUrl: './google-maps.component.html',
styleUrls: ['./google-maps.component.css']
})
export class GoogleMapsComponent implements OnInit {
private apiKey = environment.googleMapsAPIkey;
constructor() { }
ngOnInit() {
}
}
地图.js
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
打字.d.ts
declare module Map {
export interface Main {
map;
}
}
declare var Map:Map.Main;
以下代码在开发人员模式下取消了谷歌地图。
.html
<div style="width: 1000px;height: 300px;" id="map"></div>
组件.ts
constructor() {
var dynamicScripts = ["https://maps.googleapis.com/maps/api/js?key="apiKey"];
for (var i = 0; i < dynamicScripts.length; i++) {
let node = document.createElement('script');
node.src = dynamicScripts [i];
node.type = 'text/javascript';
node.async = true;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
}
ngOnInit() {
setTimeout(()=>{ //
this.initMap();
},2000);
}
注意我们可以使用promies.then((代替 setTimeout。