VUE3添加百度地图组件

1.前端项目现在需要接入百度地图，首先申请注册百度账号申请成为开发者后然后申请AK密钥，网页链接：https://lbsyun.baidu.com/apiconsole/user。申请完AK密钥记得保存，这个在项目中初始化百度地图api需要用到的。接入百度地图，有两种方式：1.JavaScript API，另外一种是使用第三方组件或者百度官方封装好的Vue版本组件。

我这里使用的是第一种API方式，现在index.html里引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的申请的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>

3.看下实现效果

参考链接：

链接：
jspopularGL | 百度地图API SDK