vue在PC端引用百度地图创建圆圈+点击圆圈弹出窗口展示信息

效果图

src/utils/baidu-map.ts

declare const window: any;

// 2.0版本
export function baiduMap() {
  return new Promise(function (resolve, reject) {
    if (typeof window.initBMap !== "undefined") {
      resolve(window.initBMap);
      return;
    }
    window.initBMap = function () {
      resolve(window.initBMap);
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=initBMap`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

页面文件引入

<template>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</template>

<script lang="ts">
import {
  toRefs,
  reactive,
  onMounted,
  defineComponent,
  getCurrentInstance,
} from "vue";
import { baiduMap } from "/@/utils/baidu-map";
let map: any = null;
const _window = window as any;
const projectList = [
  {
    id: 1,
    title: "标题1",
    aa: "aa",
    bb: "bb",
    cc: "cc",
    dd: "dd",
    longitude: "114.134919",
    latitude: "22.618848",
  },
  {
    id: 2,
    title: "标题2",
    aa: "aa",
    bb: "bb",
    cc: "cc",
    dd: "dd",
    longitude: "114.147049",
    latitude: "22.658951",
  },
  {
    id: 3,
    title: "标题3",
    aa: "aa",
    bb: "bb",
    cc: "cc",
    dd: "dd",
    longitude: "114.147743",
    latitude: "22.719001",
  },
];

export default defineComponent({
  name: "BMap",
  setup() {
    // 页面加载时
    onMounted(() => {
      baiduMap().then(() => {
        initMap(); // 创建地图
      });
    });
    const { proxy }: any = getCurrentInstance();

    const data = reactive({
      zoom: 12,
    });

    const initMap = async () => {
      map = new BMap.Map("mapContainer");

      map.centerAndZoom("深圳", data.zoom); // 初始化地图,设置城市和地图级别。
      initProjectList();

      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
      map.addControl(new BMap.NavigationControl()); // 地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
      map.addControl(new BMap.ScaleControl()); // 比例尺控件，默认位于地图左下方，显示地图的比例关系
      map.addControl(new BMap.OverviewMapControl()); // 缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
      // map.addControl(new BMap.MapTypeControl()); // 地图类型控件，默认位于地图右上方
      map.addControl(new BMap.CopyrightControl());

      mapEvent();
    };

    const mapEvent = () => {
      // 缩放事件
      map.addEventListener("zoomend", (e: any) => {});

      // 拖拽事件
      map.addEventListener("dragend", (e: any) => {});
    };

    const openInfoWindow = (item: any) => {
      let currentPoint = new BMap.Point(
        Number(item.longitude),
        Number(item.latitude)
      ); //创建中心点
      var geoc = new BMap.Geocoder();
      geoc.getLocation(currentPoint, (rs: any) => {
        var currentAddress = rs.address;

        let dom = `<div class="map-info-window">
											 <div class="title">
											  <div>${item.title}</div>
											  <div class="close" onclick="$closeInfoWindow()">关闭</div>
										  </div>
										  <div class="content">
											  <div class="cell_left">
												  <img alt src="https://img1.baidu.com/it/u=2624835088,988907460&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"/>	
											  </div>	
											  <div class="cell_right">
												  <ul>
													  <li>
														  <span class="tit">aaa:</span> ${item.aa}
													  </li>
													  <li>
														  <span class="tit">bbb:</span> ${item.bb}
													  </li>
													  <li>
														  <span class="tit">ccc:</span> ${item.cc}
													  </li>
													  <li>
														  <span class="tit">ddd:</span> ${item.dd}
													  </li>
													  <li>
														  <span class="tit">详细地址:</span> ${currentAddress}
													  </li>
												   </ul>
												  <div class="btn-link">
													  <button type="button" class="projectDetailBtn" data-item=${disposeJsonStr(
                              JSON.stringify(item)
                            )} onclick="$handleProjectDetailBtn()">项目详情</button>
												  </div>
											  </div>	
										  </div>
									 </div>`;

        var infoWindows = new BMap.InfoWindow(dom, {});
        map.openInfoWindow(infoWindows, currentPoint); // 开启信息窗口 鼠标移
      });
    };

    const initProjectList = async () => {
      projectList.forEach(async (item: any) => {
        var circle_point = new BMap.Point(
          Number(item.longitude),
          Number(item.latitude)
        ); //创建圆的中心点
        var circle_radius = 1000; //圆的半径
        var circleStyle = {
          strokeColor: "red", //边线颜色。
          fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 3, //边线的宽度，以像素为单位。
          strokeOpacity: 1, //边线透明度，取值范围0 - 1。
          fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
          strokeStyle: "solid", //边线的样式，solid或dashed。
        };

        var circle = new BMap.Circle(circle_point, circle_radius, circleStyle); //创建一个圆
        map.addOverlay(circle);

        //大圆点击事件
        circle.addEventListener("click", function (event: any) {
          openInfoWindow(item);
        });
        //大圆鼠标移出事件
        circle.addEventListener("mouseout", function (event: any) {});
        //大圆鼠标移入事件
        circle.addEventListener("mouseover", function (event: any) {});
      });
    };

    _window.$closeInfoWindow = function closeInfoWindow() {
      map.closeInfoWindow();
    };

    _window.$handleProjectDetailBtn = function handleProjectDetailBtn() {
      const dom = document.querySelector(".projectDetailBtn") as HTMLElement;
      let item: any = dom.getAttribute("data-item");
      item = JSON.parse(item);
      console.log("item---", item);
    };

    // JS去除JSON字符串各种空格、换行符
    function disposeJsonStr(str: string) {
      return str.replace(/\r\n/g, "").replace(/\n/g, "").replace(/\s+/g, "");
    }

    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="scss">
::v-deep(.BMap_pop > img) {
  display: none;
}

::v-deep(.map-info-window) {
  border: 1px solid #6dcff6;
  min-width: 200px;
  background: #0f2858;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  color: #000;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    max-width: 600px;
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .close {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      border: 1px solid #fff;
      padding: 0 8px;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
        color: #6dcff6;
        border: 1px solid #6dcff6;
      }
    }
  }

  .content {
    padding: 8px 15px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 190px;

    .cell_left {
      width: 170px;
      height: 100%;
      margin: -2px 20px 0 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
      overflow: hidden;

      > img {
        width: 155px;
        height: 155px;
        object-fit: cover;
      }
    }

    .cell_right {
      position: relative;
      height: 100%;

      > ul {
        > li {
          width: 200px;
          padding: 3px 0;
          font-size: 12px;
          color: #fff;

          > span {
            color: #fff;
            padding-right: 5px;
          }
        }
      }

      .btn-link {
        position: absolute;
        right: 0px;
        bottom: 0px;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;

        > button {
          border: 1px solid #ccc;
          font-size: 12px;
          background: transparent;
          color: #fff;
          line-height: 12px;
          padding: 5px 10px;
          border-radius: 3px;
          cursor: pointer;

          &:hover {
            border: 1px solid #6dcff6;
            color: #6dcff6;
          }
        }
      }
    }
  }
}
</style>