如何在vue js应用程序中使用bing maps api来显示地图？
注意：我使用Bing地图V8和vuejs 2.5.17。
这是我的模板
<template>
<div id="map"></div>
</template>
这是我的风格
<style lang="scss" scoped>
#map {
height: 300px;
width: 500px;
}
</style>
这是我的脚本部分（我使用基于类的对象组件）
mounted() {
let mapElement: HTMLElement = <HTMLElement>document.getElementById("map")
var map = new Microsoft.Maps.Map(mapElement, {
credentials: [API_KEY]
});
}
这就是我在我的应用程序中包含cdn的外部脚本的方法。经过一些研究，我发现并尝试了以下2个选项
选项1：我已将脚本直接包含在index.html文件中：
<!-- index.html -->
...
<head>
...
<script src="https://www.bing.com/api/maps/mapcontrol?key=[API_KEY]" async defer></script>
</head>
选项2：我以编程方式从安装方法中的组件注入文档中的脚本，如下所示
mounted() {
// Add programmaticaly the external Bing maps api script
var scriptTag = document.createElement("script");
scriptTag.src = "https://www.bing.com/api/maps/mapcontrol";
scriptTag.id = "bingApiMaps";
// Inject the dynamic script in the DOM
document.head.appendChild(scriptTag);
...
}
在这两个中，我有以下错误，我不明白为什么：
[Vue warn]: Error in mounted hook: "ReferenceError: Microsoft is not defined"
经过很多麻烦，我明白了。 Bing map api以异步方式加载。因此Microsoft / Microsoft.Maps对象不能直接使用。
我决定保持解决方案2加载脚本（这样脚本不会全局加载）。我试图在注入的脚本上使用onload方法，但没有成功。 Bing Maps api有一个调用回调函数的选项，但该函数必须是全局的。这是我最后的工作解决方案
<template>
<div id="map" ref="map"></div>
</template>
<script lang="ts">
// Vue
import { Vue, Component } from "vue-property-decorator";
@Component
export default class AppMap extends Vue {
mounted() {
if (document.getElementById("scriptBingMaps")) {
return; // already loaded
}
// Add a global function for the callback from Bing Maps api
(<any>window).OnLoadBingMapsApi = () => this.InitMap();
// Add programmaticaly the external Bing maps api script
var scriptTag = document.createElement("script");
scriptTag.src = "https://www.bing.com/api/maps/mapcontrol?callback=OnLoadBingMapsApi";
scriptTag.id = "scriptBingMaps";
// Inject the dynamic script in the DOM
document.head.appendChild(scriptTag);
}
private InitMap(): void {
let mapElement: HTMLElement = <HTMLElement>this.$refs.map;
var map = new Microsoft.Maps.Map(mapElement, {
credentials: [API_KEY]
});
}
}
</script>
<style lang="scss" scoped>
/* ==========================================================================
Map
========================================================================== */
#map {
height: 300px;
width: 500px;
}
</style>
就是这样！ :)
我转录了rdhainaut对JavaScript的回答：
mounted: function() {
if (document.getElementById("scriptBingMaps")) {
return; // already loaded
}
// Add a global function for the callback from Bing Maps api
window.OnLoadBingMapsApi = () => this.InitMap();
// Add programmaticaly the external Bing maps api script
var scriptTag = document.createElement("script");
scriptTag.src = "https://www.bing.com/api/maps/mapcontrol?callback=OnLoadBingMapsApi&key=[BING_API_KEY]";
scriptTag.id = "scriptBingMaps";
// Inject the dynamic script in the DOM
document.head.appendChild(scriptTag);
},
methods: {
InitMap: function() {
var mapElement = this.$refs.myMap;
this.map = new Microsoft.Maps.Map(mapElement, {
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
zoom: 15,
maxZoom: 21,
//minZoom: 15,
center: new Microsoft.Maps.Location(52.7759872, -1.5119702),
maxNetworkLinkDepth: 3
});
}
}