vue3中百度地图的使用

在vue3中使用百度地图

vue3、百度地图

---

前言

具体为百度地图引入、如何使用点位和自定义点位信息窗口

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、百度地图在vue3中的引入

1. 首先在百度地图开发中心中申请ak（不多介绍）
2. 两种引入方式：在 index.html 中直接引入；使用npm导包。（我使用的是npm导包，但是我试了直接引入的，也是可以的）

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=应用AK"></script>

3. 若不想带有百度地图水印，可在 index.html 中使用以下代码去掉

    <style type="text/css">.BMap_cpyCtrl {display: none;}</style>
    <style type="text/css">.anchorBL{display:none;}</style>

二、页面内容

代码如下（示例）：

<template>
  <div class="app-container">
    <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>

  </div>
</template>

<script setup>
import {ref, defineEmits} from 'vue'
import {loadBaiDuMap} from "../../system/park/bmpgl_lib.js"
//1、

const { proxy } = getCurrentInstance();
onMounted(() => {
  initMap()
})


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

let map = {
  center: {lng: 121.4472540000, lat: 31.3236200000},
  zoom: 15,
  show: true,
  dragging: true
}

let cityData = ref([
  {enitInt: 116.3, enitLat: 35.334, name: '测试数据'},
  {enitInt: 121.487899486, enitLat: 31.24916171, name: '测试数据22'},
  {enitInt: 100.2296283993, enitLat: 26.8753510895, name: '测试数据344'},
])

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(118.965, 30.143)
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 8)
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
	//2、

    cityData.value.forEach(item => {
      // 创建点
      const point = new BMapGL.Point(item.enitInt, item.enitLat)
      // 创建标注
      //3、
      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(infoWindow)
        showTap.value = true
        onedata.value = e.latLng.lng
      })
    })
  }).catch((err) => {
    console.log(err)
  })
}

</script>

注意事项

提示：

• 这里引入了一个文件，此文件为异步加载文件，放在下面，直接复制即可；
• 使用了原生点位标识，若需要自定义图片标记，需添加以下代码（步骤 1,，2，3 对应页面内容代码序号位置）；
• 放置百度地图的元素一定要设置宽高；
  下面展示一些 内联代码片。

1、引入图片：

import iconImage from '../../bigview/safetyDataManage/images/icons/图标—ai监控_画板1.png'

2、创建自定义图片：

    const icon = new BMapGL.Icon( iconImage, new BMapGL.Size(32, 32), {
      anchor: new BMapGL.Size(16, 32),
      imageOffset: new BMapGL.Size(0, 0),
      imageSize: new BMapGL.Size(32, 32),
    });

3、创建标注：

let marker = new BMapGL.Marker(point, {icon: icon});

三、异步加载文件

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)
        }
    })
}

四、图