替换图片和地图层级

YM

2024-05-20 5111f3f9c1c31b81af25cb737ec9608d9ff09f42

 src/pages/territory/territory.vue

@@ -170,7 +170,7 @@
    <!-- 朝代 -->
    <view
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
    >
      <ul class="flex">
        <li
@@ -456,12 +456,21 @@
        iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });

      let htmlStr = '<p><span class="map-circle-name">';
      ('</span><br><span class="map-circle-count">');
      ("</span><p/>");
      let icon = L.divIcon({
        html: "<div class='map-circle-name'></div>",
        iconSize: [80, 80],
        className: "map-circle",
      });
      this.map = map;
      if (markerList.length) {
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
            icon: DefaultIcon1,
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            this.isEchTrue = true;
@@ -514,6 +523,12 @@
</script>

<style>
::v-deep .map-circle-name {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2070bc;
}
.pageBox {
  width: 100%;
  height: 100%;
@@ -634,10 +649,10 @@
}

#map {
  height: 600px;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  font-size: 14px !important;
  /* z-index: -1 !important; */
  z-index: 10 !important;
}
</style>