在vue中使用bing map 的小demo

1.注意事项（关于经纬度）

如果不转换成WGS84 标准的经纬度 bing map会报错

如果要在 Bing Maps 中使用中国地区的经纬度，需要先将其转换为 WGS84 标准的经纬度。你可以使用第三方的坐标转换服务，或者使用相关的 JavaScript 库进行坐标转换。常见的库包括 coordtransform、proj4 等。通过将中国的经纬度转换为 WGS84 标准的经纬度，就可以正确地初始化 Bing Maps 了。

转换成WGS84的链接

2.相关的文档链接

中文的demo网站
bing map微软官方的文档

3.bing map的cdn

下面两种都可以 第一个是在js中加key 第二种是直接在cdn中加key

• <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'></script>```
  

• <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario&mkt=zh-cn&setlang=zh-cn' async defer></script>

4.demo的代码

<template><div id="myMap" style="width: 100%; height: 100%"></div>
</template><script>
export default {data() {return {}},mounted() {this.loadMapScenario()},methods: {loadMapScenario() {var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Av8AcViWMuCyl4gWAyLZBLG72faZ5lawWnPKnJ9R6T87m-Rx51ZB1h2zrSxDZW0_',center: new Microsoft.Maps.Location(39.91738986102482, 116.39232296123949),mapTypeId: Microsoft.Maps.MapTypeId.aerial, // 设置地图类型为卫星zoom: 10,showMapTypeSelector: false, // 将选项框隐藏showDashboard: false // 将点击按钮隐藏})// 创建点标记var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',anchor: new Microsoft.Maps.Point(12, 39)})// 创建信息窗口const infobox = new Microsoft.Maps.Infobox(map.getCenter(), {visible: false, // 初始时隐藏description: '这是信息窗口的内容' // 信息窗口的内容})// 将信息窗口添加到地图上map.entities.push(infobox)// 将点标记添加到地图上map.entities.push(pushpin)// 鼠标悬停在点标记上时显示信息窗口Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function (e) {infobox.setLocation(e.target.getLocation())infobox.setOptions({visible: true // 显示信息窗口})})// 鼠标移出点标记时隐藏信息窗口Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () {infobox.setOptions({visible: false // 隐藏信息窗口})})}}
}
</script><style scoped></style>