百度地图绘制行政区域及设置中心点

// 画行政区
const drwaDistrict = (disList, clear = true) => {
  clear && clearOverlays();
  if (!bMapGL.value) return;
  let bd = new bMapGL.value.Boundary();
  disList.map((item) => {
    bd.get(item, function (rs1) {
       // rs1 是行政区对应的点集合 此处非每次必反信息
      //  固定绘制某以区域边界
      let rs = {
        boundaries:
          "118.31745836025162, 29.50176403084455;118.32471415351442, 29.50178988588655;118.33491567020457, 29.50221464633595;118.33683409145104, 29.493920529198437;118.34740705746944, 29.482405141810684;118.35245903782534, 29.480765570596027;118.35284692614441, 29.474576948039235;118.35181261718056, 29.470045797931498;118.35879298997409, 29.463510286724496;118.32126286374623, 29.45476678125436;118.31379300428047, 29.485050140739048",
      };
      var hole = new bMapGL.value.Polygon(rs.boundaries, {
        fillColor: "#2D7EFA",
        fillOpacity: 0.1,
        strokeColor: "#2D7EFA",
        strokeWeight: 2,
        strokeStyle: "dashed",
      });
      map.addOverlay(hole);
    });
  });
};

function setViewport(pointList: any[]) {
  // 根据点集合绘制中心点位置，zoomFactor 绘制后缩放比例基础上进行修正
  map?.setViewport(pointList, {
    zoomFactor: -0.5,
  });
}

map.vue

<template>
  <div :id="mapContainerId" class="map-container"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineEmits, defineExpose } from "vue";
import { isNumber } from "lodash";
import { baiduMapKey } from "@/libs/platformKey";
import router from "@/router";
const emits = defineEmits([
  "handleSetPoint",
  "handleMapLoaded",
  "handleClickMarker",
  "handleZoomend",
]);
// 加载地图js
const mapContainerId = ref("");

let win: any = window;
function initMap() {
  const BMap_URL = `https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=${baiduMapKey}&callback=onBMapCallback`;
  return new Promise((resolve, reject) => {
    // 如果已加载直接返回
    if (typeof win.BMapGL !== "undefined") {
      resolve(win.BMapGL);
      return true;
    }
    // 百度地图异步加载回调处理
    win.onBMapCallback = function () {
      resolve(win.BMapGL);
    };
    // 插入script脚本
    let scriptNode = document.createElement("script");
    scriptNode.setAttribute("type", "text/javascript");
    scriptNode.setAttribute("src", BMap_URL);
    document.body.appendChild(scriptNode);
  });
}

let map: any = null;
const bMapGL: any = ref(null);
const mapZoom = 5.48;
const sZoomLvl = ref(0);
// 地图JS加载完成后加载富文本标记
const initMapInfo = (BMapGL) => {
  let scriptNodeBMapGLLibl = document.createElement("link");
  scriptNodeBMapGLLibl.setAttribute("rel", "stylesheet");
  scriptNodeBMapGLLibl.setAttribute(
    "href",
    "https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js"
  );
  document.body.appendChild(scriptNodeBMapGLLibl);

  let scriptNodeBMapGLLib = document.createElement("script");
  scriptNodeBMapGLLib.setAttribute("type", "text/javascript");
  scriptNodeBMapGLLib.setAttribute(
    "src",
    "https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js"
  );
  document.body.appendChild(scriptNodeBMapGLLib);

  scriptNodeBMapGLLib.onload = () => {
    mapReady(BMapGL);
  };
};
// 地图JS加载完成后创建地图实例
const mapReady = (BMapGL) => {
  bMapGL.value = BMapGL;
  map = new BMapGL.Map(mapContainerId.value, {
    enableRotate: false,
    enableTilt: false,
    minZoom: 5,
    maxZoom: 17,
  });
  map.enableScrollWheelZoom(true);
  map.setDisplayOptions({
    poiIcon: false,
  });
  map.addEventListener("zoomstart", (e) => {
    sZoomLvl.value = map.getZoom();
  });
  map.addEventListener("zoomend", (e) => {
    let lvl = map.getZoom();
    emits("handleZoomend", sZoomLvl.value, lvl);
  });
  setCenter({ lat: 37.919912722813464, lng: 105.63937584116202 });
  emits("handleMapLoaded");
};

// 设置地图中心点
const setCenter = (pos, zoom = mapZoom) => {
  map.centerAndZoom(pos, zoom);
};
// 设置标记
const setPointSign = (lng, lat, iconInfo, params: any = {}, clear = false) => {
  clear && clearOverlays();
  if (!bMapGL.value) return;
  let pt = new bMapGL.value.Point(lng, lat);
  let marker: any;
  let img1 = require("../../assets/images/pos_lv1.png");
  let img2 = require("../../assets/images/pos_lv2.png");
  let html = "";
  switch (params.level) {
    case 1:
      html = `<div class='map-marker'><div class="pos-lv1"><img src="${img1}" /><span>${params.list.length}</span></div><span style='background:${iconInfo.color}'>${iconInfo.name}</span></div>`;
      break;
    case 2:
      html = `<div class='map-marker'><div class="pos-lv2"><img src="${img2}" /><span>${params.list.length}</span></div><span style='background:${iconInfo.color}'>${iconInfo.name}</span></div>`;
      break;
    case 3:
      html = `<div class='map-marker'><div class="pos-lv2"><img src="${img2}" /><span>${params.list.length}</span></div><span style='background:${iconInfo.color}'>${iconInfo.name}</span></div>`;
      break;
    default:
      html = `<div class='map-marker'><i style='color:${iconInfo.color}' class='icon iconfont ${iconInfo.icon}'></i><span style='background:${iconInfo.color}'>${iconInfo.name}</span></div>`;
      break;
  }
  marker = new window["BMapGLLib"].RichMarker(html, pt, {
    anchor: new bMapGL.value.Size(0, 0),
    enableDragging: false,
    params,
  });
  map?.addOverlay(marker);
  marker.addEventListener("click", (e) => {
    let { params } = e.target._opts;
    emits("handleClickMarker", params);
  });
};
// 打开信息窗口
const openInfoWin = (msg, point) => {
  let isMulti = msg.length > 1;
  let opts = {
    width: 296,
    height: 245,
    title: isMulti ? `当前位置存在${msg.length}台设备` : "设备信息",
  };
  let ctx = "";
  if (isMulti) {
    msg.map((item, index) => {
      let cctx = "";
      item.equmsg.map((item) => {
        let msgText = "-";
        if (item.msg || isNumber(item.msg)) msgText = item.msg;
        cctx += `<p><label>${item.label}：</label><span>${msgText}</span></p>`;
      });
      cctx += `<div class="to2D_3D"  --objectId='${item.objectId}'>设备设备资源</div>`;
      ctx += `<div class='equ-multi ${index === 0 ? "" : "hide-box"}' alt="${
        item.title
      }"><div class='multi-title'><p>${
        item.title
      }</p><i class="icon iconfont iconshow_danjiantoujiantou_xia"></i></div><div class="info-box">${cctx}</div></div>`;
    });
  } else {
    msg[0].equmsg.map((item) => {
      let msgText = "-";
      if (item.msg || isNumber(item.msg)) msgText = item.msg;
      ctx += `<div class='equ-single'><span>${item.label}</span><b title='${msgText}'>${msgText}</b></div>`;
    });
    ctx += `<div class="to2D_3D" --objectId='${msg[0].objectId}' >设备设备资源</div>`;
  }
  const shtm = resourcesId.value
    ? `<div class="gis-info-box">${ctx}
    </div>`
    : `<div class="gis-info-box no-visibleSetting">${ctx}
    </div>`;
  var infoWindow = new bMapGL.value.InfoWindow(shtm, opts);
  map.openInfoWindow(infoWindow, point);
  if (infoWindow.isOpen()) {
    addEvt(isMulti);
  } else {
    infoWindow.addEventListener("open", () => {
      addEvt(isMulti);
    });
  }
};
const addEvt = (isMulti) => {
  let box = document.querySelector(".gis-info-box");
  box?.addEventListener("mousewheel", (e) => {
    e.stopPropagation();
  });

  //设备设备资源跳转
  let box1 = document.querySelector(".to2D_3D");
  box1?.addEventListener("click", (e) => {
    toVisibleSetting(e);
  });
  if (!isMulti) return;
  let targetEl = document.querySelectorAll(".equ-multi");
  targetEl.forEach((el) => {
    el.addEventListener("click", (e) => {
      if (e?.target?.className == "to2D_3D") {
        toVisibleSetting(e);
        return;
      }
      handleToggleEquInfo(el);
    });
  });
};
const handleToggleEquInfo = (el: Element) => {
  let cln = el.className;
  if (cln.indexOf("hide-box") !== -1) {
    el.className = "equ-multi";
  } else {
    el.className = "equ-multi hide-box";
  }
};
const resourcesId = ref("");//单独判断是否有资源
//跳转设备资源
function toVisibleSetting(e) {
  if (resourcesId.value) {
    router.push({
      path: "/pages/***/" + resourcesId.value,
    });
  } else {
    ("设备资源页面无权限");
  }
  e.stopPropagation();
}
const clearOverlays = () => {
  map?.clearOverlays();
  let markerArr = map?.getOverlays();
  if (markerArr?.length > 0) {
    markerArr.map((item) => {
      map?.removeOverlay(item);
    });
  }
};
// 画行政区
const drwaDistrict = (disList, clear = true) => {
  clear && clearOverlays();
  if (!bMapGL.value) return;
  let bd = new bMapGL.value.Boundary();
  disList.map((item) => {
    bd.get(item, function (rs1) {
      let rs = {
        boundaries:
          "118.31745836025162, 29.50176403084455;118.32471415351442, 29.50178988588655;118.33491567020457, 29.50221464633595;118.33683409145104, 29.493920529198437;118.34740705746944, 29.482405141810684;118.35245903782534, 29.480765570596027;118.35284692614441, 29.474576948039235;118.35181261718056, 29.470045797931498;118.35879298997409, 29.463510286724496;118.36800556212863, 29.45794060798536;118.37336952398803, 29.45363632498402;118.37752355815645, 29.450208632713636;118.38712626439384, 29.439317709842665;118.39506890204935, 29.43290492300398;118.40366865018518, 29.42990442112826;118.4177419534526, 29.4278462329841;118.41769164834406, 29.42163649535902;118.41361172438019, 29.414478112730986;118.41840687919087, 29.409740446686108;118.4238426156605, 29.408995466313407;118.42154762474436, 29.399956781233865;118.42444969052394, 29.400679959408986;118.425531969002, 29.39735949585641;118.42941696067027, 29.39639289147066;118.43335647948298, 29.39209509881618;118.44172572242503, 29.38659360929462;118.44814088139186, 29.38274725807556;118.45830242348684, 29.380618944074616;118.46374328029786, 29.37721622339762;118.46783766698044, 29.36858631841835;118.46944545418167, 29.36640427294245;118.47550704009988, 29.367333707804082;118.485180622642, 29.37171455060806;118.48877860569992, 29.37219163800736;118.49318093151122, 29.375107306631254;118.49679750949319, 29.373537117747084;118.49933225814986, 29.370078052059082;118.50180304745425, 29.366614224772277;118.50818550810052, 29.368792252471366;118.5110727518392, 29.36792090539558;118.51354210385476, 29.366352650536495;118.51711538351117, 29.37008481938193;118.52029583416818, 29.36941611126031;118.52451885819976, 29.37165010468525;118.52875679410278, 29.36838801698372;118.53220386183509, 29.368053264390884;118.53093779004975, 29.363532893830836;118.52992234550159, 29.3590845656845;118.5333421047464, 29.356706823297333;118.53516827001702, 29.352817539706837;118.54193251050494, 29.348708593959408;118.54667232969621, 29.349854396456657;118.54949238018276, 29.345280710884094;118.55294735300353, 29.34395917543629;118.5590775694627, 29.34517697215828;118.56334110707274, 29.34831458852686;118.5672292428103, 29.345149660048087;118.57099907171222, 29.346723360755544;118.57440329027172, 29.34554226108266;118.57882097710723, 29.345142733632798;118.58652601295542, 29.339299503238053;118.5910329913586, 29.339268804841115;118.59523158148029, 29.337413738478617;118.59410429789618, 29.335308003585126;118.59665907876573, 29.334008063663852;118.60243105098763, 29.336240244000486;118.61015540040428, 29.331700892775473;118.61094456179453, 29.326373943919453;118.61508736714408, 29.319998444364362;118.61945016751295, 29.315208623199204;118.624984448097, 29.311031063051754;118.62436650373688, 29.30644979129736;118.62865231932356, 29.29711787050106;118.6313456189027, 29.293282911583216;118.6347785832385, 29.290383542279383;118.63790783048147, 29.285784008232795;118.64449160139247, 29.271652859238184;118.64420782668196, 29.26745097061245;118.6367537773932, 29.27202739346948;118.63197245648736, 29.271943113542534;118.6240015222083, 29.284228023021196;118.6215714261435, 29.286300485757135;118.61817080080607, 29.28409571158842;118.61668823739288, 29.27641646900037;118.61489980095367, 29.2728604219429;118.62079798509967, 29.260484643340714;118.62317993198914, 29.256902906189143;118.61599645231988, 29.246431977310937;118.62055481379821, 29.237778837469193;118.62404086798962, 29.23263857322764;118.62979101138764, 29.22408449346558;118.64025079091182, 29.224017983246302;118.64152602541337, 29.21655792329288;118.64061792837364, 29.21172316648028;118.63527336991324, 29.203683590399898;118.63658076375202, 29.200041280284243;118.64826699978858, 29.198735029794086;118.66782284124267, 29.2036297567315;118.6834242520126, 29.206447749302257;118.69013145010065, 29.208700163900176;118.6989420305396, 29.204639901742517;118.71255737765819, 29.19718480109685;118.71774185807675, 29.19382808503306;118.72163116161147, 29.192904937121156;118.72581618731999, 29.19625380119942;118.72981499429632, 29.20291281250338;118.73804535920658, 29.204296172971866;118.74197463733647, 29.212160263318744;118.75068308043898, 29.218094773790988;118.76368120184185, 29.219266093411054;118.76942101472652, 29.22370592049734;118.77560602782177, 29.228965546726076;118.77538818873568, 29.238487498365114;118.7700128183963, 29.245078027877685;118.77180853111014, 29.250922689605616;118.77650047061776, 29.25713356798705;118.78246539886314, 29.256292532202167;118.79120968435548, 29.263867746983323;118.79503952006546, 29.271213577259495;118.80320556630122, 29.273807495150614;118.81925639931764, 29.283530314533188;118.83044542325459, 29.2848883174885;118.83673931097762, 29.28721285993273;118.84181446761568, 29.29455872743065;118.85015173088156, 29.301813900359928;118.86204511616864, 29.305547669495024;118.86578215691947, 29.314563486101584;118.87451566274568, 29.324836847911047;118.8854240560414, 29.330970921860015;118.89569743717232, 29.327953526777918;118.90224608433789, 29.33545347238556;118.91157777180302, 29.336493316307564;118.9164295198608, 29.33132524141193;118.92314713829276, 29.326311594564945;118.92910532924681, 29.322445780653176;118.93561139673123, 29.31675318780476;118.94596526603581, 29.31364529632121;118.94961418301615, 29.31340539404883;118.95635946925778, 29.306789157717827;118.9619357905397, 29.304926565330057;118.9645867799293, 29.302619911042996;118.97069480824238, 29.302075090731474;118.97136081194726, 29.298998481999057;118.96149346490672, 29.290838491323928;118.96651265711152, 29.27652965113353;118.96930737538268, 29.27305087699776;118.97318616874293, 29.2730890782373;118.9760134955041, 29.27004663908979;118.98271090206208, 29.26708736848535;118.98645764451241, 29.265085879228423;118.99083984828029, 29.260975333114107;118.99459521446352, 29.25086951128307;118.99252803382463, 29.246867979053906;118.99063817869337, 29.243276305562986;118.99349676648627, 29.231821682464062;118.99615754740596, 29.224974181657625;119.00568165191123, 29.219362159460513;119.01244732968796, 29.2146738882312;119.01650326889471, 29.215399339658212;119.02285994817288, 29.218336951122943;119.03219370174067, 29.222149296180536;119.03559172199215, 29.22562327873599;119.05341095923492, 29.22748118483819;119.06154188172526, 29.227664790794126;119.06666060618052, 29.23152485171109;119.07872925087254, 29.230792266224864;119.08454595870883, 29.228549798356635;119.09059541750267, 29.23430826580047;119.0954694435371, 29.234680180361643;119.09975418115718, 29.235915762135534;119.1026186079359, 29.232838638361393;119.1107098253227, 29.23242132993916;119.11632441441931, 29.233780333888554;119.12149524059414, 29.235948146609203;119.12564783747374, 29.239095064372638;119.12853346426249, 29.241444374613923;119.13083887552253, 29.240920025456443;119.13382771761435, 29.24199361858195;119.13844770285064, 29.23904873473667;119.13590972029414, 29.235056900054087;119.13863868260201, 29.22842458495215;119.14292090496664, 29.22612138719959;119.14681703562324, 29.227815142548124;119.15076975952694, 29.228578166381467;119.15284789949303, 29.229897901159628;119.15436280190457, 29.229602640757157;119.15996526387679, 29.232329846499866;119.16405938106772, 29.22787140619746;119.16741086909379, 29.21995352713178;119.17041579085421, 29.220784068201123;119.17463441318878, 29.224199467781997;119.17631774788336, 29.22141687934603;119.17877119989141, 29.219043304937856;119.1827133237901, 29.218030545081653;119.18360767675554, 29.21435856546596;119.18253231522989, 29.21263723738035;119.18436162456982, 29.210035211006087;119.18757064134203, 29.21072712088473;119.18990758312547, 29.21185289285719;119.19162747885431, 29.211259428791987;119.19234621309262, 29.210448513248586;119.19300925238932, 29.20889066080439;119.19693628475544, 29.212812122053393;119.19719894928646, 29.216969307535834;119.19902655184592, 29.216565488995176;119.19947777070342, 29.21965138155372;119.20191047185419, 29.222781310758194;119.19966560638551, 29.225732341136972;119.19827646674533, 29.225569062701087;119.19641122518502, 29.231341252748038;119.19999366755764, 29.23430007105748;119.20258186539212, 29.232370821004846;119.20536670230268, 29.233266582581358;119.20794699504869, 29.234172894864976;119.20962511957133, 29.23417675585458;119.20905514472545, 29.231004863913654;119.21502905602593, 29.227749186381615;119.2179573523264, 29.228168562852527;119.2203106432701, 29.22788086226991;119.21960987514198, 29.23164738216445;119.21725577572332, 29.235562684027148;119.21984496169387, 29.241554759417554;119.2228479071822, 29.241106679885373;119.22358442786957, 29.242757953854763;119.21923105970856, 29.248905911713067;119.2222603255483, 29.252280736325766;119.21779026750157, 29.254005645263398;119.21555025288264, 29.253379340095137;119.2124185802148, 29.25841007616676;119.2075627897822, 29.263006286100048;119.2046818341821, 29.261756225258885;119.19991344887562, 29.262905928896295;119.1972199696354, 29.266869253844135;119.19797149202478, 29.268691587620204;119.19426598179734, 29.27231118788482;119.19423921229317, 29.27520225382102;119.1991055129002, 29.276328097058876;119.20338513017887, 29.28123112662307;119.2062777637506, 29.292814349778933;119.2102803436101, 29.29448383738291;119.21307793645889, 29.29512429905937;119.21722954520243, 29.294919632108815;119.21606920397558, 29.300171543142895;119.21911553762001, 29.29881547787816;119.22284709870722, 29.299626394651956;119.22650958010075, 29.299264483095047;119.22974374942724, 29.297233864342445;119.23267231521936, 29.298277172957864;119.23607213208186, 29.295903903886227;119.23702325795551, 29.2930331959743;119.23564534713421, 29.289860864175136;119.2370886545966, 29.289496082556187;119.23655245603788, 29.286090130560527;119.23582042687805, 29.28341879413902;119.23628485082655, 29.276713483221876;119.23981285588526, 29.27700490444255;119.24004794243716, 29.273258029938198;119.24031087645983, 29.268806511308483;119.24285496749381, 29.2640126884742;119.24346698303756, 29.26181231250878;119.23869877739216, 29.26057263524425;119.23967640327835, 29.25737273724711;119.24277259287857, 29.253123223494537;119.24915649081368, 29.256408809203094;119.2532374029136, 29.25518450651989;119.25144959528824, 29.25767965454748;119.25314406897115, 29.25892685100555;119.26089842179181, 29.254560650819354;119.26453188791737, 29.25206834084803;119.26297826853839, 29.249432425476563;119.26198779688342, 29.246769969429184;119.2586288529216, 29.241750709875447;119.25530646999404, 29.238658871586637;119.2527738772706, 29.237518820553866;119.25026419133766, 29.232856210034065;119.24302591503229, 29.228824495063304;119.24040546803, 29.227808680894515;119.24263766739102, 29.222445523952597;119.24227026043756, 29.220092936198995;119.23945550995353, 29.217527589536402;119.24173055848733, 29.212798093460744;119.24389843917386, 29.209640270924304;119.24119876162561, 29.206101110408476;119.2408963021605, 29.20261258666191;119.23901605889819, 29.201960898843108;119.23415739388797, 29.20127547133778;119.22927420513734, 29.201643329568395;119.22927366615403, 29.199730483734697;119.22808538762582, 29.19930610263286;119.23109048904736, 29.197614866406944;119.23392652937198, 29.197624010004457;119.23658524418899, 29.19700287409379;119.23832885518328, 29.19441747325837;119.24132614134689, 29.194975406424028;119.24082165297264, 29.19714594063355;119.24290473361904, 29.197772987468518;119.24710000001036, 29.19614470709555;119.24937450956087, 29.19449543273924;119.248253783607, 29.191451973114837;119.25193962094377, 29.188048005028833;119.2508844712921, 29.181296015932976;119.2506021338704, 29.177849370555602;119.2484956074502, 29.177138236064188;119.24858588715392, 29.173486064154353;119.25071936273942, 29.17103410061759;119.24991807422478, 29.16823113080543;119.25121181381981, 29.165712728546325;119.25297833160461, 29.162270285504356;119.2574447964293, 29.160223436132103;119.25776728810727, 29.158099031303294;119.25787454578513, 29.153218117736234;119.25535614628875, 29.149118098570757;119.25727375906024, 29.144440621069062;119.25944235839117, 29.139999850676148;119.26248635644129, 29.142180629377965;119.26746458591484, 29.141521771145765;119.27260163580249, 29.140974585903244;119.27578037967905, 29.135016085956504;119.27434039594704, 29.128994292906583;119.27639958166687, 29.12609369426364;119.27694611073898, 29.123217071917047;119.27840325210622, 29.12461997580033;119.28530834689803, 29.123879440585075;119.28621590495447, 29.1212614933994;119.29362971015641, 29.120473366729254;119.2920944162098, 29.115635850250733;119.29243711976176, 29.113189512793213;119.29386434755556, 29.11425601586216;119.29617155542661, 29.11354940656358;119.29823972420155, 29.10931477582499;119.30283994671663, 29.109163144110227;119.30760644558154, 29.104616454583738;119.30576734471157, 29.101453218041375;119.30798310508175, 29.097289017258987;119.30636319075614, 29.09557706777888;119.30611840250475, 29.094202327144938;119.30868477151537, 29.095347537960052;119.3099266788825, 29.095727851782073;119.31222077149312, 29.09440006117029;119.31388631973863, 29.09294679392659;119.31215806976854, 29.091067883875084;119.31604485804785, 29.091950925413624;119.32138447582793, 29.092451109698167;119.32958061529825, 29.099055063775246;119.33261042012133, 29.09704954963065;119.33792901755248, 29.085981270474072;119.34289251481569, 29.079961312543528;119.34151550229988, 29.07584034912284;119.33471371264169, 29.071215618452744;119.33122631099201, 29.06397938836385;119.33392491057364, 29.058769790013308;119.34005431855785, 29.049897793120834;119.3387413552249, 29.046135826083212;119.33918386051897, 29.041924525744083;119.33799135995487, 29.039667075380056;119.33534971294254, 29.041952077461648;119.33286499990277, 29.045163104230838;119.33228092166036, 29.042841780792642;119.33194648251911, 29.033835920078406;119.33303325252471, 29.029073405095534;119.33427372260306, 29.028971869311125;119.33397674280155, 29.025263691234404;119.3301501409914, 29.023866605281096;119.32982234931092, 29.017612883747503;119.32719067348977, 29.015537621734815;119.32675149192607, 29.01110379042484;119.32751316516773, 29.008630859657504;119.32826522654044, 29.004100854502912;119.33153622639284, 29.001456534532096;119.32859059279605, 28.995710472677892;119.33376141897087, 28.993448605327032;119.33364957993493, 28.98689848054548;119.32913379813775, 28.97911659699882;119.33015211726352, 28.973718055090785;119.32695217337694, 28.971556820660663;119.32285329516682, 28.965233063925854;119.32024551427222, 28.960701453897276;119.32218971688681, 28.955627468809286;119.3204072990945, 28.95124951287635;119.32261695098722, 28.95130268979124;119.32307688340816, 28.948066275118876;119.32507435553951, 28.946147640376434;119.32695495812402, 28.94431549677276;119.33074445991662, 28.942419708097013;119.3341312513492, 28.935209606711677;119.33078164976472, 28.92663559686921;119.33592947931848, 28.924647879600023;119.33564121308042, 28.922092163954478;119.33807768711434, 28.920105465224566;119.33952629457924, 28.913556263758355;119.34671866747307, 28.911660855214194;119.35235760064899, 28.90285894754272;119.35107491021171, 28.893766218381487;119.34875665318289, 28.89559460011816;119.34680724039632, 28.89431931381164;119.34507180398217, 28.88701380263004;119.33929345379114, 28.888066300098874;119.33803609556925, 28.886095942035382;119.3434047286173, 28.8834950684822;119.34250265022447, 28.875873683332497;119.33878851626416, 28.8715619120977;119.33359595109599, 28.87319553229047;119.32977357132175, 28.871412062777388;119.32680134788187, 28.87281106967664;119.32385445665736, 28.872857249548254;119.32081809420409, 28.871098762332064;119.31681084315595, 28.86945024222176;119.31956864107067, 28.867980414055033;119.3182254946726, 28.86018531603181;119.31726861964367, 28.851692122943156;119.31784236737272, 28.84847297459614;119.3328440693844, 28.853051536500313;119.33811415831804, 28.851570875795556;119.34393787293729, 28.848390163304583;119.3414141734384, 28.845593206426855;119.34309660982748, 28.841200513033098;119.34867625483976, 28.83817475701224;119.35180047157189, 28.83277275624715;119.34614788415222, 28.829506500649234;119.34589815522052, 28.825490246317223;119.34110569532638, 28.819457738791503;119.33723723247948, 28.817161683984875;119.33666492203926, 28.81480133285023;119.33445401251883, 28.815443070779764;119.32874959287126, 28.810878898854885;119.32684796993782, 28.812512849102035;119.3244058365792, 28.81765949256726;119.31725640268874, 28.818856058860497;119.31336027203216, 28.814666512784786;119.31151021183497, 28.814776251900703;119.30888060211647, 28.811212796173056;119.3047259391342, 28.81099742461438;119.29583936204912, 28.813898098341138;119.29073249522659, 28.81313141883141;119.28777994467737, 28.813556614136804;119.28537248591142, 28.811097435563113;119.27958128995162, 28.812595610117427;119.27729348547956, 28.813603374436443;119.27403497207375, 28.812105372770617;119.2724032001154, 28.809539263457967;119.27453469942877, 28.80813805156469;119.2753167642055, 28.810255884711754;119.28137520605445, 28.80702056569504;119.28079957188385, 28.801644310612346;119.27767203142133, 28.799902411588505;119.27307791738372, 28.801429710368087;119.27189269309426, 28.798480177847125;119.26876290686798, 28.795769705141325;119.26966687170237, 28.792378427774345;119.27278596809307, 28.792607291461607;119.26838651685941, 28.789574964685364;119.26653951090096, 28.789535869982707;119.26653178547359, 28.7865763421656;119.26217159019069, 28.785923344748298;119.26199983417725, 28.78225394634564;119.25823377815846, 28.778543260795253;119.25639404847462, 28.77342371409818;119.2550925834522, 28.770636358423044;119.25117049176637, 28.76929390499382;119.2487062600922, 28.768511379573024;119.24138722612153, 28.769054620336153;119.22935514246376, 28.772345507515983;119.2221908865324, 28.778848057437738;119.21633591088141, 28.7781056532399;119.21615831588214, 28.775493345281706;119.21416335900624, 28.77416931799698;119.21408314032422, 28.777583196936014;119.21249655313304, 28.776290143810225;119.21043197758013, 28.774287490180082;119.21149691876185, 28.780225131855836;119.21077126757113, 28.782614133124884;119.20767462881815, 28.78348266008366;119.20460080702513, 28.7843128744836;119.20167278021633, 28.785059270308707;119.19955754023268, 28.782757542672652;119.19649970827773, 28.78261223365934;119.19451912428998, 28.780047923297648;119.19367696287466, 28.777286390556196;119.19015165273245, 28.774591112128196;119.18601639314919, 28.77103996173492;119.18210660824886, 28.770330112770882;119.1831971511376, 28.765972286759407;119.18244104739011, 28.763388327468544;119.18142820792795, 28.761233435049597;119.17827578440283, 28.76165639025887;119.17720365677702, 28.759562970656706;119.17693120071594, 28.756941168959408;119.17371850089111, 28.759590598213727;119.17199267634591, 28.759870198174504;119.17138021164942, 28.756009166115344;119.17100534876022, 28.754310275803277;119.16775339298462, 28.75617723282324;119.16398149798002, 28.75333090747146;119.1574521643829, 28.7501848485493;119.15523568536832, 28.74766945254803;119.15210239575055, 28.74777205834135;119.1466848050522, 28.74533055120353;119.14395072240295, 28.745457623738158;119.14163264503522, 28.744475637966367;119.1392412659379, 28.745396502264366;119.13720795141674, 28.744813550433477;119.13361778361674, 28.744188395666146;119.12908412553992, 28.74645994741457;119.12595676473853, 28.744410161360108;119.120647240193, 28.747282146428898;119.11742995901007, 28.747340495787853;119.11364342162567, 28.749521883127976;119.10788905619175, 28.750537309447022;119.10635816394216, 28.752665033038575;119.10551537371298, 28.754450162188448;119.10385566445328, 28.752335696339227;119.10037787467255, 28.74647918623369;119.09515952813626, 28.742447427393138;119.09338447644913, 28.74275723939018;119.09110179231848, 28.74637436233638;119.0890657828808, 28.7475138810699;119.08630924259379, 28.747719647061494;119.07997942265037, 28.742061606043695;119.07370386035974, 28.740650293644354;119.06932399218618, 28.739566202617688;119.0599350826601, 28.733909536586793;119.05314595910957, 28.726217380653686;119.05001859830817, 28.718721527600938;119.04147014341693, 28.71597680851864;119.031686698111, 28.714555161455372;119.0241753369307, 28.709135284559718;119.02063170135611, 28.701773161995824;119.0160661534337, 28.698884547051012;119.00543246196285, 28.68894150061527;118.99546764877452, 28.678488327912916;118.98314882599806, 28.66577572411306;118.9692210482232, 28.651168416793215;118.96454177482327, 28.653094764998368;118.96099050365186, 28.65535215012874;118.9545784887543, 28.651774718321636;118.94890775556333, 28.65296163582712;118.93626832755047, 28.64650522075992;118.93207782217836, 28.640316993722585;118.93300496329489, 28.634631764065624;118.93052644856313, 28.626930414027463;118.92349559099995, 28.61990410350105;118.92424585576164, 28.607692259828102;118.9201122131283, 28.605168488604438;118.91672362508467, 28.602059949746597;118.91589206367436, 28.584868509798817;118.91522498200287, 28.580746169885185;118.92170401049145, 28.575716053319745;118.92016727925603, 28.57072177808327;118.91448792233217, 28.564771809810825;118.90933838599793, 28.555864661407668;118.90427391919545, 28.549402453199168;118.89678016480313, 28.544636327814537;118.89658056131888, 28.540494308230407;118.8883280980931, 28.536551089767304;118.88525023392528, 28.52933500894843;118.87558617342158, 28.519556322508503;118.87363155046306, 28.52120915054674;118.87167306479085, 28.53451341884298;118.86474371575028, 28.53600432988344;118.86069217824051, 28.534153480386163;118.85836287205392, 28.54551168856375;118.85339452394096, 28.54805998962752;118.84547003205677, 28.546338971091497;118.84097059941986, 28.550278963749122;118.83070593185239, 28.555101305679674;118.82400241681694, 28.551322675926876;118.81987712842485, 28.550091050026683;118.81879395164127, 28.546454071438735;118.81279821151689, 28.54105008806612;118.805492023315, 28.542587550363955;118.79991210881107, 28.53962636236946;118.78951835474186, 28.534592911365323;118.78380836560012, 28.525338924222236;118.77362212010364, 28.53050507661457;118.76374022051384, 28.531153257351573;118.75296648321402, 28.518684631831977;118.74435415880106, 28.513422356848366;118.73931277845018, 28.506206104624784;118.73315929587832, 28.50469326212629;118.73113460509005, 28.497044914214907;118.73527489518416, 28.492949338702182;118.73761776578397, 28.486090348417925;118.73343426719482, 28.477519628743156;118.73299275003681, 28.468610586797862;118.73826930677014, 28.464033921499936;118.73789642015308, 28.455741336275466;118.73492096281335, 28.445765990600698;118.73533930368922, 28.436929443461473;118.73277284484806, 28.43153337152979;118.7304381488284, 28.421732586454066;118.74103779452042, 28.420487042569423;118.75192157424516, 28.422154303306993;118.76298869812443, 28.420947442043563;118.75917781666072, 28.416618161612924;118.76335341016139, 28.410646622130127;118.76217141977175, 28.402235899364264;118.75628356613907, 28.39247717940363;118.74972773252944, 28.38292022592951;118.74820375723226, 28.37532042208588;118.7432618193013, 28.359415726709567;118.73746065215033, 28.352746349985186;118.72998091132396, 28.344248726347516;118.71986176924905, 28.339953239726473;118.71393268339351, 28.33761932083867;118.70995768151317, 28.32623408679952;118.70352689203045, 28.32731421595734;118.70854761135462, 28.317896337482864;118.70221581513908, 28.306690164384694;118.69234685114863, 28.28739079878256;118.68538633090685, 28.27894062259579;118.67328471840263, 28.278597222195316;118.66852971784823, 28.280239537612328;118.66057728866268, 28.285431061455036;118.65203081004357, 28.28107798261053;118.64725649592073, 28.278536065313716;118.64329308218146, 28.27082905991744;118.6344447729111, 28.268542204304723;118.62652638950435, 28.263968503361113;118.61958329638948, 28.269476820262373;118.62333551850342, 28.274824038601476;118.61930248608715, 28.27402864978754;118.61271898466781, 28.262207499251982;118.60289493595282, 28.265693606651737;118.60616207309154, 28.275951697347868;118.5999191192909, 28.284286804201166;118.59061330302447, 28.29260852903299;118.58389676255914, 28.294619340962008;118.58085177637297, 28.294896214226068;118.57019922048642, 28.287893450742214;118.55933178992196, 28.286864447007826;118.55368297538541, 28.283625802896825;118.54710953498778, 28.27951743413619;118.54192209016102, 28.276357775609412;118.5335093692323, 28.280976268923308;118.5257479197981, 28.28332901896049;118.52392983927706, 28.27628444941157;118.52182861285937, 28.28165486197848;118.51332246815764, 28.28605141562088;118.50501664558458, 28.282210107375807;118.5017391779325, 28.278207932986657;118.50094022501219, 28.27151742134287;118.50301575989232, 28.267091310154328;118.50751734846243, 28.263008545010653;118.51065566859106, 28.259817847603944;118.51098669417136, 28.25945935143895;118.50913232210773, 28.252540542476332;118.49968439390966, 28.24486361762858;118.48902096852643, 28.2523501852943;118.47652508973401, 28.251897876797322;118.46398600244657, 28.252848947428433;118.45998845309795, 28.253835487212882;118.45661342946752, 28.255468563356516;118.45211714089992, 28.256929878595386;118.45182078991228, 28.261161461617345;118.45432535550381, 28.268243866720326;118.44514422404211, 28.26943172409927;118.44229057692951, 28.27499701757601;118.4384881395376, 28.283405521223397;118.43660448271434, 28.28789225793072;118.43974477911507, 28.296089257725722;118.46788689412237, 28.30891831254389;118.47775522929898, 28.320671341390764;118.48094915453865, 28.324570946019485;118.48944604669363, 28.323845330810208;118.49303899924068, 28.3333118788336;118.48851162930245, 28.341047137083283;118.48673882337908, 28.333546045683587;118.48378088299681, 28.33339414728736;118.4818636295475, 28.33425895573779;118.47618597940411, 28.334546932193817;118.47950782334837, 28.338207494900868;118.48008390667171, 28.34676736005701;118.47598763354758, 28.35994433800203;118.47097392100639, 28.365327407522457;118.46930019818075, 28.374078220191482;118.46347522593378, 28.386440151824424;118.45250727498276, 28.394252447949476;118.44567835649818, 28.40562212905757;118.43723293724891, 28.40565707901667;118.44267442287381, 28.41180697835794;118.44498351718644, 28.417014642505865;118.45607417667006, 28.41922512306479;118.45879846778926, 28.422146758481794;118.46045314653811, 28.424844435663235;118.4591439560883, 28.429434726960388;118.4656166964383, 28.436533593797733;118.47031052238749, 28.449669603541597;118.47193016722144, 28.455710293320067;118.47099188711658, 28.458967768562275;118.47482262113206, 28.45894617412984;118.4753505552801, 28.46247807483207;118.4774667833998, 28.470390915897063;118.48651568429048, 28.4730055878303;118.48488139707672, 28.476964542482673;118.4833018166685, 28.48263623744464;118.47686896108313, 28.48672443897302;118.46983064758423, 28.487911175657537;118.46449201794019, 28.48913305906297;118.46450288743686, 28.48590938307756;118.45838336081326, 28.484491413542454;118.45398750280164, 28.491815120412372;118.44930463617966, 28.493413228926396;118.44140269176374, 28.500025563658152;118.43528487192062, 28.49906315920265;118.43052726628024, 28.49943639255975;118.42688733235501, 28.498371289119817;118.42190649779548, 28.502666396556595;118.42542587912132, 28.508527145214256;118.43152204980166, 28.506456232577793;118.4328931335011, 28.50813021752296;118.44193673438926, 28.511362333126893;118.4444695067738, 28.512749943421237;118.44771957610783, 28.51446754882208;118.4514235592159, 28.52144281837691;118.44492467817555, 28.526581156724205;118.44031978447184, 28.524647545647674;118.43553828390489, 28.52249070702909;118.43343274562076, 28.52808701751039;118.43175902279512, 28.52986720571439;118.43120575643171, 28.534989659066387;118.43411222390827, 28.538523431617385;118.43003238977495, 28.541807755747133;118.42923074193811, 28.545903555878247;118.42843861613967, 28.552221697325194;118.4325833079308, 28.554117199909008;118.42543773675403, 28.55649079294718;118.41952392209215, 28.560629004246053;118.41906255238239, 28.564167300722964;118.41720063455247, 28.570795136406506;118.41670081736687, 28.578359331332226;118.42320535773193, 28.58010955807732;118.42382842243346, 28.59069569703909;118.42877054002551, 28.592659957058864;118.42636730329545, 28.601208373536114;118.42554463510969, 28.603879703746003;118.41934075759873, 28.60199699946754;118.42080652269888, 28.604100739095013;118.42299919661747, 28.610816168352756;118.41911294732147, 28.61368329546884;118.42551624865558, 28.61644633938039;118.42766346831539, 28.615852990712682;118.43100696142241, 28.619987890626184;118.43534757364519, 28.62492043138707;118.4383549208305, 28.63097792451941;118.43609837739018, 28.634298723104287;118.42978921847349, 28.645452794881553;118.4338774966786, 28.654774792916072;118.43709962871128, 28.657999267252368;118.43688017267526, 28.662895534837475;118.43668550987131, 28.67179098113427;118.43769547475584, 28.674536158122137;118.43658175558494, 28.678921445188003;118.43706639140743, 28.68168338681135;118.43699380832224, 28.68596372408271;118.42788481079296, 28.68455077522943;118.42187694354422, 28.688072575411017;118.42177741129375, 28.692077698345088;118.42206316227637, 28.696440697998952;118.42066288364788, 28.699512985479203;118.41501667419732, 28.70434685962308;118.41173094213457, 28.703661343838863;118.40647693286955, 28.70753027050607;118.39775429654, 28.705134781345222;118.39639866369534, 28.7104961015586;118.40518463056331, 28.71813224829967;118.40592869701698, 28.726969185004524;118.40154846952123, 28.72965501566782;118.40346338737622, 28.734514641464678;118.39870946478844, 28.73854480934991;118.40585018511544, 28.73937079265512;118.40383618416274, 28.741900483835032;118.39927845149828, 28.748976877081983;118.39749055404235, 28.752613653415878;118.4019218951216, 28.7583129149249;118.39980755344347, 28.760663634146773;118.39581817867497, 28.7612002666753;118.38899851273713, 28.76838829315138;118.38682811679519, 28.778814182394417;118.3877893935211, 28.785789515777044;118.38975290970416, 28.792662766296917;118.38066313591278, 28.802594971663346;118.37271564740755, 28.818545288415972;118.36348852270376, 28.820945032202783;118.3499363264625, 28.82065760704669;118.33856395837103, 28.82106220143499;118.3305569122105, 28.825530672285574;118.32236975579525, 28.827435184177517;118.31133236582835, 28.833080952401854;118.30579979202477, 28.837024136403095;118.30589294630613, 28.843645368428806;118.31040720098393, 28.847873678769787;118.30391011655462, 28.859097419129178;118.30090968632173, 28.86644049999438;118.29472108000444, 28.87296028435827;118.29034992539432, 28.885304420041884;118.28650248289635, 28.900112564429822;118.2825440098374, 28.9033442467771;118.27788845170292, 28.92023437734084;118.27546653021828, 28.924768724425096;118.26134040658688, 28.928528199869;118.25312737897296, 28.925953533612677;118.22895254041863, 28.91781679373525;118.2134722212314, 28.912424429485817;118.20472056963388, 28.909443532976887;118.20319506721734, 28.922040473601157;118.22355426328876, 28.937244376650344;118.2315629263992, 28.953099310565392;118.21942178845256, 28.955001696784727;118.21366832132416, 28.96012920122242;118.20344443682683, 28.970590736175236;118.19567723823737, 28.980486252027287;118.18244915062401, 28.98614209576078;118.16584756649958, 28.99241014204374;118.15131136640302, 28.986514127822655;118.13635745424446, 28.99755820380548;118.13602544052807, 29.005227096239434;118.1347733823087, 29.021487314629617;118.12007584654259, 29.009543517454322;118.11397365721534, 28.997476618433335;118.10954662800252, 28.999469320561907;118.11745773513464, 29.01041336585947;118.1110441931177, 29.01620929708411;118.10337904203415, 29.006565523767332;118.09581836388136, 29.029593478328454;118.08897174877823, 29.041474855400534;118.07949291887063, 29.04578706192042;118.07333674138224, 29.05927400469297;118.08529507415764, 29.06949510199348;118.08401732440069, 29.080799074354506;118.07628947159255, 29.088324180577313;118.06530508165072, 29.09211615456853;118.05061625944806, 29.095917376936914;118.0447095413997, 29.105948214611775;118.05352272692463, 29.11721832553462;118.06218463780174, 29.119533459915544;118.05408776109023, 29.126692231000714;118.046579184657, 29.13335706414008;118.05151636156876, 29.15292839089599;118.04423514626005, 29.170317162703654;118.03555850317258, 29.175495590962857;118.0417434264373, 29.184401743873682;118.04532371287668, 29.19936009624083;118.0479699412471, 29.20916982442567;118.05139787507204, 29.21923858966069;118.06119461529953, 29.223090224180513;118.07494147434473, 29.222592967674004;118.09236707411318, 29.226751091769863;118.0888298165077, 29.239293383340158;118.08776209057889, 29.25013076301586;118.08646772217, 29.26237861868829;118.08662815953402, 29.27720598459528;118.08070284656162, 29.29431436989864;118.08852008076796, 29.297275678790296;118.11400123519446, 29.291709480320858;118.12360492956793, 29.298830990718823;118.14164155674406, 29.29029455252634;118.15871052922516, 29.29153110931543;118.17825729779364, 29.29041772062389;118.1804679378224, 29.298927217524934;118.186243772758, 29.304403489983965;118.18092014481597, 29.31517815367308;118.1770809667287, 29.321634102316732;118.19030204755909, 29.332928204992367;118.20256751098827, 29.346570352221438;118.21494256768965, 29.35030986468121;118.21717009586199, 29.363791012817334;118.21257732928265, 29.372817442942445;118.2149104083524, 29.383578507874578;118.19934798404158, 29.39626316580027;118.20217584978604, 29.40028938248016;118.21100960650716, 29.401708196076;118.22387648547507, 29.425710300164837;118.2346285736121, 29.42963443919955;118.24356833038334, 29.43072018210198;118.25605055493202, 29.43649677258575;118.26321885323819, 29.431557484297365;118.27648574764956, 29.432127399441182;118.28856957370468, 29.431004552635052;118.29651616390443, 29.429249479733738;118.3022277699961, 29.424482938144397;118.31191608474855, 29.42667520728132;118.3206665685489, 29.428708331973652;118.32126286374623, 29.45476678125436;118.31379300428047, 29.485050140739048",
      };
      if (item != "衢州市") {
        rs = rs1;
      }
      var hole = new bMapGL.value.Polygon(rs.boundaries, {
        fillColor: "#2D7EFA",
        fillOpacity: 0.1,
        strokeColor: "#2D7EFA",
        strokeWeight: 2,
        strokeStyle: "dashed",
      });
      map.addOverlay(hole);
    });
  });
};

function setViewport(pointList: any[]) {
  map?.setViewport(pointList, {
    zoomFactor: -0.5,
  });
}
function getCenterByPointList(pointList: any[]) {
  let lngsum = 0;
  let latsum = 0;
  pointList.map((item) => {
    lngsum += Number(item.lng);
    latsum += Number(item.lat);
  });
  let lng = lngsum / pointList.length;
  let lat = latsum / pointList.length;
  return { lng, lat };
}
const mapComInit = () => {
  initMap().then(initMapInfo);
};

onMounted(() => {
  mapContainerId.value =
    Math.floor(new Date().valueOf() + Math.random() * 1000) + "";
  mapComInit();
});
defineExpose({
  setCenter,
  setPointSign,
  setViewport,
  drwaDistrict,
  getCenterByPointList,
  openInfoWin,
});
</script>

<style lang="scss">
.map-container {
  width: 100%;
  height: 100%;
  .BMap_bubble_pop {
    background: rgba($color: #fff, $alpha: 0.9) !important;
    border-radius: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    transform: translate(45%, 100px);
    .BMap_bubble_top {
      font-size: 16px;
      height: 50px !important;
      background: #e9e9e9 !important;
      .BMap_bubble_title {
        line-height: 50px !important;
        height: 50px !important;
        text-indent: 10px;
        width: 256px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .BMap_bubble_buttons {
        top: 9px !important;
      }
    }
    .BMap_bubble_center {
      .BMap_bubble_content {
        width: 100% !important;
        padding: 10px;
        box-sizing: border-box;
        .to2D_3D {
          position: absolute;
          right: 10px;
          bottom: 10px;
          padding: 0px 10px;
          font-size: 10px;
          border-radius: 5px;
          background-color: var(--el-color-primary);
          color: var(--el-color-white);
          cursor: pointer;
        }
        .gis-info-box {
          height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          position: relative;
          .equ-single {
            display: flex;
            align-items: center;
            justify-content: space-between;

            > span {
              font-weight: 14px;
              display: block;
              padding-right: 10px;
            }
            > b {
              flex: 1;
              font-size: 16px;
              font-weight: 400;
              text-align: right;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .equ-multi {
            margin-bottom: 8px;

            .multi-title {
              cursor: pointer;
              height: 38px;
              display: flex;
              align-items: center;
              background: #eaeef5;
              padding: 0 8px;
              p {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 16px;
              }
              i {
                transform: rotate(180deg);
              }
            }
            .info-box {
              padding: 8px;
              position: relative;
              padding-bottom: 30px;
              > p {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                display: flex;
                label {
                  white-space: nowrap;
                }
                span {
                  flex: 1;
                  word-break: break-all;
                }
              }
            }
          }
          .hide-box {
            .multi-title i {
              transform: rotate(0);
            }
            .info-box {
              display: none;
            }
          }
        }

        /* 整个滚动条 */
        .gis-info-box::-webkit-scrollbar {
          /* 对应纵向滚动条的宽度 */
          width: 8px;
          /* 对应横向滚动条的宽度 */
          height: 8px;
        }

        /* 滚动条上的滚动滑块 */
        .gis-info-box::-webkit-scrollbar-thumb {
          background-color: #ddd;
          border-radius: 8px;
        }

        /* 滚动条轨道 */
        .gis-info-box::-webkit-scrollbar-track {
          background-color: #fff;
          border-radius: 8px;
        }
        .no-visibleSetting {
          .to2D_3D {
            display: none;
          }
          .info-box {
            padding-bottom: 0px !important;
          }
        }
      }
    }
    > img {
      display: none !important;
    }
  }
}
.map-marker {
  position: absolute;
  transform: translate(-100%, -100%);
  .pos-lv1 {
    position: relative;
    line-height: 0;
    span {
      font-size: 16px;
      color: #fff;
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .pos-lv2 {
    position: relative;
    line-height: 0;
    span {
      font-size: 16px;
      color: #fff;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  > i {
    font-size: 34px;
  }
  > span {
    position: absolute;
    white-space: nowrap;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    padding: 4px;
    display: block;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
  }
}
</style>

gismap.vue

<template>
  <div class="gis-map">
    <Map
      ref="mapInsRef"
      @handleClickMarker="handleClickMarker"
      @handleMapLoaded="getEquList"
      @handleZoomend="handleMapZoomend"
    ></Map>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { forIn } from "lodash";
import Map from "./map.vue";
// 设备列表
const levelIconMap = {
  1: "iconkt_crew",
  2: "icondw_device",
  3: "icondw_device",
};
const equList = ref<any[]>([]);
const getEquList = async () => {
  // const res = await deviceLocationList();
  let res = {
    code: 200,
    data: [
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondz_device",
        containObjectIds: [8],
        country: "中国",
        deviceState: 1,
        district: "柯城区",
        lat: "28.964422508734767",
        lon: "118.89591743219161",
        objectId: 8,
        objectName: "yhtest1",
        province: "浙江省",
        town: "信安街道",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondq_device",
        containObjectIds: [9],
        country: "中国",
        district: "常山县",
        lat: "29.099611659827254",
        lon: "118.63687840226355",
        objectId: 9,
        objectName: "权限测试",
        province: "浙江省",
        town: "芳村街道",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondq_device",
        containObjectIds: [2],
        country: "中国",
        district: "柯城区",
        lat: "28.938632163646677",
        lon: "118.81945366720754",
        objectId: 2,
        objectName: "设备名称",
        province: "浙江省",
        town: "航埠镇",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icongk_device",
        containObjectIds: [4],
        country: "中国",
        district: "柯城区",
        lat: "28.963411244904496",
        lon: "118.89476760113922",
        objectId: 4,
        objectName: "运维测试",
        province: "浙江省",
        town: "信安街道",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondq_device",
        containObjectIds: [7],
        country: "中国",
        district: "柯城区",
        lat: "28.961388687299888",
        lon: "118.83382655536245",
        objectId: 7,
        objectName: "测试",
        province: "浙江省",
        town: "白云街道",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondq_device",
        containObjectIds: [5],
        country: "中国",
        district: "柯城区",
        lat: "28.962399971092793",
        lon: "118.8395757106244",
        objectId: 5,
        objectName: "摄像头字段测试",
        province: "浙江省",
        town: "白云街道",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondq_device",
        containObjectIds: [10],
        country: "中国",
        district: "柯城区",
        lat: "28.901166179935707",
        lon: "118.86955044482058",
        objectId: 10,
        objectName: "设备122501",
        province: "浙江省",
        town: "黄家乡",
      },
      {
        city: "衢州市",
        color: "#999999",
        colorLogo: "icondq_device",
        containObjectIds: [3],
        country: "中国",
        district: "柯城区",
        lat: "28.960377393525995",
        lon: "118.85854792298888",
        objectId: 3,
        objectName: "设备名称1",
        province: "浙江省",
        town: "白云街道",
      },
    ],
    message: "SUCCESS",
    timestamp: 1735194348469,
    total: null,
  };
  if (!res) return;
  equList.value = res.data;
  markerLvl.value = 1;
  setMarkerInMap(res.data);
};

const mapInsRef = ref();
// RichMarker点击事件
const handleClickMarker = (params) => {
  // containObjectIds deviceLocationList中返设备信息
  if (params.containObjectIds) {
    // 首次加载
    getObjInfo(params.containObjectIds, params);
  } else {
    // 下钻后加载
    markerLvl.value++;
    setMarkerInMap(params.list);
  }
};
const getObjInfo = async (containObjectIds, params) => {
  // const res = await deviceInfo({ containObjectIds });
  let res = {
    code: 200,
    data: [
      {
        data: [
          {
            code: "sbmc",
            color: null,
            colorLogo: null,
            deviceStatus: null,
            name: "设备名称",
            unit: "",
            value: "设备名称",
          },
          {
            code: "sbbm",
            name: "设备编码",
            value: "qxcs",
          },
        ],
        title: "权限测试",
        objectId: 9,
      },
    ],
    message: "SUCCESS",
    timestamp: 1735195682522,
    total: null,
  };
  if (!res) return;
  let msgArr: any[] = [];
  res.data.map((item) => {
    let equmsg = item.data.map((info) => {
      if (info.value && info.unit) {
        info.value = info.value + info.unit;
      }
      // 配置展示信息key value
      return {
        label: info.name,
        msg: info.value,
      };
    });
    // 弹窗标题 展示信息集 设备id
    msgArr.push({
      title: item.title,
      equmsg,
      objectId: item.objectId,
    });
  });
  let point = { lat: params.lat, lng: params.lng };
  mapInsRef.value.openInfoWin(msgArr, point);
};
const markerLvl = ref(1);
const setMarkerInMap = (pointList) => {
  const { names, centerList, points } = splitEquGroup(pointList);
  mapInsRef.value.drwaDistrict(markerLvl.value == 3 ? ["衢州市"] : names);
  mapInsRef.value.setViewport(
    markerLvl.value == 3
      ? [
          { lat: 29.089655662042123, lng: 118.49836977844647 },
          { lat: 28.48016063076048, lng: 118.49614325790313 },
          { lat: 29.270025508246995, lng: 119.22670267368068 },
        ]
      : centerList
  );
  points.map((item, index) => {
    mapInsRef.value.setPointSign(
      item.lng,
      item.lat,
      {
        icon: item.icon,
        color: item.color,
        name: item.name,
      },
      item,
      index === 0
    );
  });
};
const splitEquGroup = (list) => {
  let level = ["province", "city", "district"];
  let names: string[] = [];
  let points: any[] = [];
  let centerList: any[] = [];
  if (level[markerLvl.value - 1]) {
    /**
     * dl格式信息
     {常山县: {list: Array(1)}柯城区: {list: Array(7)}}
     */
    let dl = createGroup(list, level[markerLvl.value - 1]);
    forIn(dl, (value, key) => {
      let point = mapInsRef.value.getCenterByPointList(value.list);
      points.push({
        lng: point.lng,
        lat: point.lat,
        icon: levelIconMap[markerLvl.value],
        color: "#317DFA",
        name: key,
        level: markerLvl.value,
        list: value.list,
      });
      centerList.push(point);
      names.push(key);
    });
  } else {
    list.map((item) => {
      points.push({
        lng: item.lng,
        lat: item.lat,
        icon: item.colorLogo,
        color: item.color,
        objectId: item.objectId,
        containObjectIds: item.containObjectIds,
        name: item.objectName,
        level: markerLvl.value,
      });
      centerList.push({
        lng: item.lng,
        lat: item.lat,
      });
    });
  }

  if (names.length === 1) {
    markerLvl.value++;
    let nobj = splitEquGroup(points[0].list);
    names = nobj.names;
    points = nobj.points;
    centerList = nobj.centerList;
  }
  return { names, points, centerList };
};
const createGroup = (list, key) => {
  let group = {};
  list.map((item) => {
    let nitem = {
      ...item,
      lng: item.lon,
    };
    if (group[item[key]]) {
      group[item[key]].list.push(nitem);
    } else {
      group[item[key]] = { list: [nitem] };
    }
  });


  /*参考格式  {浙江省: {list: [{city: "衢州市",color: "#999999",colorLogo: "icondz_device",},];}} */
  return group;
};
const handleMapZoomend = (slvl, elvl) => {
  if (slvl < elvl) return;
  let level = ["province", "city", "district"];
  if (elvl < 9 && !level[markerLvl.value - 1]) {
    equList.value.map((item, index) => {
      let nitem = {
        color: item.color,
        containObjectIds: item.containObjectIds,
        icon: item.colorLogo,
        lat: item.lat,
        lng: item.lon,
        name: item.objectName,
        objectId: item.objectId,
      };

      mapInsRef.value.setPointSign(
        nitem.lng,
        nitem.lat,
        {
          icon: nitem.icon,
          color: nitem.color,
          name: nitem.name,
        },
        nitem,
        index === 0
      );
    });
  }
};
</script>

<style lang="scss">
.gis-map {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  padding-top: 1px;

  .map-container .BMap_bubble_pop {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
      0px 9px 4px 0px rgba(0, 0, 0, 0.05),
      0px 12px 48px 16px rgba(0, 0, 0, 0.03);
  }

  .map-container .BMap_bubble_pop .BMap_bubble_top {
    background: #f7f9fa;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    border-bottom: 1px solid #e3e4e6;
  }

  .map-container
    .BMap_bubble_pop
    .BMap_bubble_center
    .BMap_bubble_content
    .gis-info-box
    .equ-single {
    font-size: 12px;
  }

  .map-container
    .BMap_bubble_pop
    .BMap_bubble_center
    .BMap_bubble_content
    .gis-info-box
    .equ-single
    > b {
    font-size: 12px;
  }
}
</style>

百度地图api添加信息窗口

信息窗口是地图上方浮动显示的HTML内容，可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

注意：同一时刻地图上只能有一个信息窗口处于打开状态。

var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口