当前位置：首页 > news >正文

在vue中使用bing map 的小demo

news 2025/7/28 15:31:46

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>