在vue中使用bing map 的小demo

morenhaodan

已于 2024-04-15 11:52:49 修改

阅读量554

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-04-15 11:19:52 首次发布

本文链接：https://blog.csdn.net/haodanzj/article/details/137773605

版权

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>