vue3 中使用百度地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 中使用百度地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

最近一个项目要用到地图，因为微信小程序用的也是百度地图，所以想着网页端也用百度地图，在网上查了很多方法，包括引入百度地图第三方库，还是有问题，发现最简单的方法就是在index.html中引入script，然后直接在相关页面肝就完事。

一、申请ak

在百度开发者平台上面申请，其他博客都可以看到相关申请过程，这里就不多述。
vue3 中使用百度地图
因为还处于开发调试状态，所以白名单写的是**。

二、使用步骤

1.在public下index.html引入相关script

 <script
    type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=your_ak"
></script>

2.在相关页面编写代码

代码如下（示例）：

<template>
  <div class="bmap" id="container"></div>
  <div></div>
</template>

<script>
import { useStore } from 'vuex'
// import { ref } from 'vue'
export default {
  name: 'BmapDemo',
  mounted() {
    const store = useStore()
    var map = new window.BMapGL.Map('container')
    var point = new window.BMapGL.Point(
      store.state.record.longitude,//这里本人项目中可以有相关store数据，建议从自己项目出发进行修改
      store.state.record.latitude
    )
    map.centerAndZoom(point, 18)
    map.enableScrollWheelZoom(true)
    var label = new window.BMapGL.Label('疲劳地点', {
      position: point, // 设置标注的地理位置
      offset: new window.BMapGL.Size(0, 0) // 设置标注的偏移量
    })
    // 添加标签
    map.addOverlay(label) // 将标注添加到地图中
    label.setStyle({
      fontSize: '32px',
      color: 'red'
    })

    var marker = new window.BMapGL.Marker(point) // 创建标注
    map.addOverlay(marker) // 将标注添加到地图中
    var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
  },
  setup() {
    // const store = useStore()
    // let latitude = ref('')
    // let longitude = ref('')
    // console.log(store.state.record.latitude)
    // latitude.value = store.state.record.latitude
    // longitude.value = store.state.record.longitude
    // return {
    //   latitude,
    //   longitude
    // }
  }
}
</script>

<style scoped>
.bmap {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

显示结果：
vue3 中使用百度地图

总结

感觉这种方法是最快速的，关键点有一个就是new window.BMapGL.Map,前面要加window。然后其他用法都可以在官方文档中查到。
链接：
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey文章来源地址https://www.toymoban.com/news/detail-416322.html

到了这里，关于vue3 中使用百度地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！