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

原文地址：https://blog.csdn.net/haodanzj/article/details/137773605

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！