Typescript 如何在vuejs应用程序中使用从外部cdn加载的bing地图？_Typescript_Vuejs2_Bing Maps_Cdn

Typescript 如何在vuejs应用程序中使用从外部cdn加载的bing地图？

typescript vuejs2

Typescript 如何在vuejs应用程序中使用从外部cdn加载的bing地图？,typescript,vuejs2,bing-maps,cdn,Typescript,Vuejs2,Bing Maps,Cdn,如何在vue js应用程序中使用bing maps api来显示地图注意：我使用Bing maps V8和vuejs 2.5.17 这是我的模板 <template> <div id="map"></div> </template> 在这两种情况下，我都有以下错误，我不明白为什么： [Vue warn]: Error in mounted hook: "ReferenceError: Microsoft is not defined"

如何在vue js应用程序中使用bing maps api来显示地图

注意：我使用Bing maps V8和vuejs 2.5.17

这是我的模板

<template>
   <div id="map"></div>
</template>

在这两种情况下，我都有以下错误，我不明白为什么：

[Vue warn]: Error in mounted hook: "ReferenceError: Microsoft is not defined"

在经历了很多麻烦之后，我明白了。 Bing映射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>


//Vue
从“Vue属性装饰器”导入{Vue，Component}；
@组成部分
导出默认类AppMap扩展Vue{
安装的（）{
if（document.getElementById（“scriptBingMaps”））{
return；//已加载
}
//为Bing Maps api的回调添加全局函数
（window.OnLoadBingMapsApi=（）=>this.InitMap（）；
//在外部Bing地图api脚本中添加程序
var scriptTag=document.createElement（“脚本”）；
scriptTag.src=”https://www.bing.com/api/maps/mapcontrol?callback=OnLoadBingMapsApi";
scriptTag.id=“scriptBingMaps”；
//在DOM中注入动态脚本
document.head.appendChild（scriptTag）；
}
私有InitMap（）：void{
让mapElement:HTMLElement=this.$refs.map；
var map=新的Microsoft.Maps.map（mapElement{
凭证：[API_密钥]
});
}
}
/* ==========================================================================
地图
========================================================================== */
#地图{
高度：300px；
宽度：500px；
}

瞧！：）

我已经转录了rdhainaut对JavaScript的回答：

mounted:function（）{
if（document.getElementById（“scriptBingMaps”））{
return；//已加载
}
//为Bing Maps api的回调添加全局函数
window.OnLoadBingMapsApi=（）=>this.InitMap（）；
//在外部Bing地图api脚本中添加程序
var scriptTag=document.createElement（“脚本”）；
scriptTag.src=”https://www.bing.com/api/maps/mapcontrol?callback=OnLoadBingMapsApi&key=[BING_API_KEY]”；
scriptTag.id=“scriptBingMaps”；
//在DOM中注入动态脚本
document.head.appendChild（scriptTag）；
},
方法：{
InitMap:function（）{
var mapElement=this.$refs.myMap；
this.map=新的Microsoft.Maps.map（mapElement{
mapTypeId:Microsoft.Maps.mapTypeId.Aeror，
缩放：15，
maxZoom:21，
//minZoom:15，
中心：新的Microsoft.Maps.Location（52.7759872，-1.5119702），
maxNetworkLinkDepth:3
});
}
}

您为我节省了几个小时，感谢您提供了此解决方案。我有一些问题，TS抱怨“找不到名称微软”，因为ofc微软不存在，直到api加载。要修复此问题，请在导入下声明常量Microsoft:any比ts不会抛出错误。。。

<!-- index.html -->
...
<head>
   ...
   <script src="https://www.bing.com/api/maps/mapcontrol?key=[API_KEY]" async defer></script>
</head>

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"

<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>