在vue中使用bing map 的小demo

原创已于 2024-04-15 11:52:49 修改 · 779 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

本文介绍了如何将中国的经纬度转换为WGS84标准以便在BingMaps中正确使用，提供了坐标转换方法、相关的文档链接以及一个包含BingMapsAPI集成和信息窗口功能的JavaScript示例代码。

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>