gpt4 book ai didi

javascript - 将 javascript map 合并到 Angular 中

转载 作者:行者123 更新时间:2023-12-02 22:23:44 25 4
gpt4 key购买 nike

我正在尝试将 Javascript 谷歌地图合并到我的 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() {
}

}

ma​​ps.js

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}

typings.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。

关于javascript - 将 javascript map 合并到 Angular 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59132564/

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