百度地图基础（vue3)

注册就不赘述了
主要是点击地图坐标反解得到位置信息和周边兴趣点
自定义标记点
在最外层 index.html引用

    src="https://api.map.baidu.com/getscript?v=3.0&type=webgl&ak=你的密钥"></script>

1.加载地图
在html中给个盒子用来加载地图
引入onMounted，在onMounted中加载

<template>
  <div class="container">
    <div class="container" ref="mapBaidu"></div>
    <!-- 这个盒子用来展示点击的位置名称等，最开始设置为none，鼠标点击兴趣点时显示 -->
    <div class="custom-div" ref="biaozhu">
         <div class="custom-div2"></div>
         <el-input v-model="inputText" />
         <div class="adds" @click="addDian()">添加</div>
    </div>
  </div>
</template>
<script setup>

const map = ref(); //用来注册地图
const mapBaidu= ref(); //获取地图容器
const zuobiao = ref(null);//存点击的坐标

import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
onMounted(() => {
  map.value = new BMapGL.Map(mapBaidu.value); // 创建地图实例
  let point = new BMapGL.Point(104.707314, 31.538099); // 创建点坐标
  map.value.centerAndZoom(point, 17);//放大比例
});

2.点击地图中的兴趣点
因为兴趣点是底层渲染，鼠标点击只能点击到坐标，不能点击兴趣点
但是点击的坐标点可以返回坐标点附近的兴趣点，那可以对附近的兴趣点进行删选，删选距离为10m就差不多
继续在onMounted中：

//监听地图的点击事件
map.value.addEventListener("click", function(e) {
   rightPoint.value.style.display = "none";//这里是点击之后出现的一个弹框
   let point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
   zuobiao.value = e.latlng; //定义一个参数存放点击得到的坐标
   // 创建一个地理编码器实例
   var geocoder = new BMapGL.Geocoder();
   // 使用地理编码器进行逆地理编码
   geocoder.getLocation(point1, function(result) {
     if (result) {
       var address = result.content.poi_desc; //设置一个参数来存放地理位置名称
       if (result.surroundingPois.length > 0) { //判断是否有兴趣点
         result.surroundingPois.forEach(item => {
           let point2 = new BMapGL.Point(item.point.lng, item.point.lat);
           var distance = map.value.getDistance(point1, point2).toFixed(2); //计算距离
           if (distance < 10) { //设置得到距离为10m内的兴趣点
             address = item.title; //兴趣点替换位置名称
           }
           inputText.value = address; //这是弹框中双向绑定的名字的名称，用于展示点击的位置名称 
         });
       }
       if (address) { //如果这个位置存在，那么就打开弹框
         function createDOM(feature) {
           let div = document.createElement("div");//新建dom
           div = biaozhu.value; //这里等于在html中写好的那个dom，这样写样式更直观
           div.style.display = "block";//让他显示
           return div;
         }
         // 创建自定义覆盖物，将刚刚那个dom覆盖在地图上
         const customOverlay = new BMapGL.CustomOverlay(createDOM, {
           point: point1,
           opacity: 0.5,
           map: map,
           offsetY: -10,//设置偏移量
           offsetX: 110,
           properties: {
             title: "this is a title",
             size: "100"
           }
         });
         map.value.addOverlay(customOverlay);
       }
     }
   });
 });

点击楼栋，出现楼栋信息

接上文
点击这个添加，新增自定义标记点

在dom中，已经设置好了addDian（）方法，并且点击时已经保存了坐标

const addDian = () => {
  biaozhu.value.style.display = "none";
  let myIcon = new BMapGL.Icon(mhq, new BMapGL.Size(23, 25)); //mhq是本地图标地址 必须要引入 不然不显示
//标记点icon
  marker.value = new BMapGL.Marker(zuobiao.value, { icon: myIcon });//坐标就是之前存的点击坐标
标记点文字信息
  var label = new BMapGL.Label(inputText.value, { //位置名称
    offset: new BMapGL.Size(20, -10)
  });
  label.setStyle({
    color: "blue", // 文字颜色
    border: "0px solid #5100ff", // 边框
    background: "#00000000" // 背景色
  });
  marker.value.setLabel(label);
  map.value.addOverlay(marker.value);
//监听标记点的点击事件，可以获得标记点的坐标信息
  marker.value.addEventListener("click", function(e) {
    e.domEvent.stopPropagation(); // 阻止事件冒泡到地图
    var markerPosition = e.target.getPosition(); // 获取点击的标注位置坐标
  });
};

点击添加之后形成的自定义标记点

百度地图基础 （vue3)

推荐阅读更多精彩内容

百度地图基础（vue3)