VUE3-如何引入百度地图api并在页面上展示

页面效果如图所示

具体流程：

1、首先需要注册百度开发者账号，并且申请百度地图api的密钥

官网流程如下：

jspopularGL | 百度地图API SDK (baidu.com)

2、拿到密钥之后，可以进行导入百度地图api

cnpm install vue-baidu-map --save

然后是代码部分

模板代码

 <div class="container-area">
        <div style="width: 800px; height: 600px" id="containerGL"></div>
      </div>
      <div ref="customInfoWindow" class="custom-info-window" v-show="showTap">
        这是定义的信息窗口内容
        {{ onedata }}
      </div>

js部分

<script setup>
import topBar from '../shopCenter/topBar.vue'
import { ref, onMounted } from 'vue'
import { loadBaiDuMap } from './bmpgl_lib.js'

onMounted(() => {
  initMap()
})

const showTap = ref(false)
const onedata = ref('111')
const customInfoWindow = ref(null)

let cityData = ref([{ enitInt: 121.634964, enitLat: 29.90614, name: '和利时卡优倍科技有限公司' }])

function initMap() {
  // 传入密钥获取地图回调。
  loadBaiDuMap()
    .then((BMapGL) => {
      // 创建地图实例
      let map = new BMapGL.Map('containerGL', { enableMapClick: false })
      // 添加比例尺控件
      // map.addControl(
      //   new BMapGL.ScaleControl({
      //     anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      //     offset: new BMapGL.Size(20, -10)
      //   })
      // )
      // 设置地图允许的最大最小级别
      map.setMinZoom(5)
      map.setMaxZoom(20)
      // 添加缩放控件 右下角的+-
      map.addControl(
        new BMapGL.ZoomControl({
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
          offset: new BMapGL.Size(10, 10)
        })
      )
      map.disableDoubleClickZoom() //阻止双击放大
      // 保存地图
      map.value = map
      // 创建点坐标 axios => res 获取的初始化定位坐标
      const point = new BMapGL.Point(121.634964, 29.90614)
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 15)
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)

      cityData.value.forEach((item) => {
        // 创建点
        const point = new BMapGL.Point(item.enitInt, item.enitLat)
        // 创建标注
        let marker = new BMapGL.Marker(point)
        // 将标注添加到地图中
        map.addOverlay(marker)

        marker.addEventListener('click', (e) => {
          let infoWindow = new BMapGL.InfoWindow(customInfoWindow.value, {
            maxWidth: 350,
            minWidth: 350,
            closeOnClick: true
          })
          marker.openInfoWindow(infoWindow)
          console.log('11', infoWindow)
          showTap.value = true
          onedata.value = e.latLng.lng
        })
      })
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

bmpgl_lib.js文件代码

const ak = ''

/**
 * 异步加载百度地图
 * @returns {Promise}
 * @constructor
 */
export function loadBaiDuMap() {
  return new Promise(function (resolve, reject) {
    try {
      console.log('BMap is defined:', BMapGL === undefined || BMapGL)
      resolve(BMapGL)
    } catch (err) {
      window.init = function () {
        resolve(BMapGL)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.body.appendChild(script)
    }
  })
}

这样就绘制成了一个基本的百度地图了，中心就是你的地址，初始缩放比可以配置。

更多配置查询jspopularGL | 百度地图API SDK (baidu.com)