vue3 中使用百度地图

vue3 中使用百度地图

前言

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

一、申请ak

在百度开发者平台上面申请，其他博客都可以看到相关申请过程，这里就不多述。

因为还处于开发调试状态，所以白名单写的是**。

二、使用步骤

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>

显示结果：

总结

感觉这种方法是最快速的，关键点有一个就是

new window.BMapGL.Map

,前面要加window。然后其他用法都可以在官方文档中查到。
链接：
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey