feat:地图信息框点击

ZhangXianQiang

2024-03-08 dfa2e66389df106ef38a4fd621f2e3e0cf91ace8

feat:地图信息框点击

 src/assets/img/test_img/show_img1.jpg

 src/assets/img/test_img/show_img2.jpg

 src/assets/img/test_img/show_img3.jpg

 src/assets/img/test_img/show_img4.jpeg

 src/views/daoAnOffice/center-map.vue

@@ -5,6 +5,16 @@
    </div>
    <div class="mapwrap">
      <CityMap @mapItemClick="mapItemClick" @cancleClick="cancleClick"></CityMap>

      <!-- <DialogType1></DialogType1>
      <DialogType2></DialogType2>
      <DialogType3></DialogType3>
      <DialogType4></DialogType4>
      <DialogType5></DialogType5>
      <DialogType6></DialogType6>
      <DialogType7></DialogType7>
      <DialogType8></DialogType8>
      <DialogType9></DialogType9> -->
    </div>

    <div class="map-info-container">
@@ -64,6 +74,7 @@

<script setup>
import CityMap from './center/city-map.vue';

import { ref,onMounted } from "vue";
const mapData = ref([
  {

 src/views/daoAnOffice/center/dialog/dialog-type1.vue

New file
@@ -0,0 +1,92 @@
<template>
  <!-- 信息弹窗一  事故路段-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="200px">
        <div class="scroll-content">
          <div class="dialog-title">新马路一段</div>
          <div class="dialog-text">
            近3年发生交通事故xx起， 其中造成人员伤亡xx起
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #572438;
$border-color: #B24C57;
$title-color: #FE3146;
$text-color: #D991AA;

.dialog-container {
  width: 205px;
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;

  .dialog-content {
    width: 100%;
  }
  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
}

</style>

 src/views/daoAnOffice/center/dialog/dialog-type2.vue

New file
@@ -0,0 +1,93 @@
<template>
  <!-- 信息弹窗二  旅游通道-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="200px">
        <div class="scroll-content">
          <div class="dialog-title">都江堰客运中心</div>
          <div class="dialog-text">
            日累积人流量达到3000+
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #275767;
$border-color: #58B1B3;
$title-color: #17CDD2;
$text-color: #7ACDCF;

.dialog-container {
  width: 205px;
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type3.vue

New file
@@ -0,0 +1,121 @@
<template>
  <!-- 信息弹窗三  景区-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">都江堰青城山景区</div>
          <div class="dialog-text">
            青城山（Mount Qingcheng），世界文化遗产青城山-都江堰的主体景区、全国重点文
            物保护单位、国家重点风景名胜区、国家AAAAA级旅游景区、全真龙门派圣地，十大
            洞天之一，中国四大道教名山之一，五大仙山之一，成都十景之一。
          </div>
          <div class="dialog-img">
            <div class="img-item">
              <img src="@/assets/img/test_img/show_img1.jpg">
            </div>
            <div class="img-item">
              <img src="@/assets/img/test_img/show_img2.jpg">
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #244E45;
$border-color: #65B68D;
$title-color: #2BB06D;
$text-color: #94E8BE;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 565px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 247px;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type4.vue

New file
@@ -0,0 +1,139 @@
<template>
  <!-- 信息弹窗四  警力-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">成都百货大楼交叉路口</div>
          <div class="info-container">
            <div class="info-item">
              <span class="lable">在岗警力</span>
              <span class="num">5</span>
            </div>
            <div class="info-item">
              <span class="lable">在岗警车</span>
              <span class="num">2</span>
            </div>
            <div class="info-item">
              <span class="lable">备勤警力</span>
              <span class="num">3</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #182A54;
$border-color: #5695F5;
$title-color: #005DBA;
$text-color: #94E8BE;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 210px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 247px;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;

  .info-item {
    color: #9DB8DF;

    .num {
      color: #E5BF33;
    }
  }
}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type5.vue

New file
@@ -0,0 +1,153 @@
<template>
  <!-- 信息弹窗五  施工-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">都江堰青城山景区</div>
          <div class="info-container">
            <div class="info-item">
              <span class="lable">施工单位:</span>
              <span class="num">XXXX公司</span>
            </div>
            <div class="info-item">
              <span class="lable">施工周期:</span>
              <span class="num">1年</span>
            </div>
            <div class="info-item">
              <span class="lable">开始时间:</span>
              <span class="num">2024年1月</span>
            </div>
          </div>
          <div class="infor-desc">
            本次施工包括xxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxx。
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #1D3D61;
$border-color: #629BB9;
$title-color: #0F80BC;
$text-color: #79B7D7;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 305px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 247px;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;

  span {
    margin-left: 0;
  }

  .info-item {
    color: $text-color;

    .num {
      color: $text-color;
    }
  }
}

.infor-desc {
  font-size: 14px;
  word-break: break-all;
  color: $text-color;
  margin-bottom: 10px;
}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type6.vue

New file
@@ -0,0 +1,142 @@
<template>
  <!-- 信息弹窗六  事故发生点-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">xx路与xx路交叉路口</div>
          <div class="dialog-text">
            近3年发生交通事故xx起，其中造成人员伤亡 xx起，xxxxxxxxxxxxxxxxxx。
          </div>

        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #522933;
$border-color: #F2908C;
$title-color: #FE433C;
$text-color: #F2908C;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 305px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
  word-break: break-all;

}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 247px;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;

  span {
    margin-left: 0;
  }

  .info-item {
    color: $text-color;

    .num {
      color: $text-color;
    }
  }
}

.infor-desc {
  font-size: 14px;
  word-break: break-all;
  color: $text-color;
  margin-bottom: 10px;

}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type7.vue

New file
@@ -0,0 +1,146 @@
<template>
  <!-- 信息弹窗七  企业-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">华光剧院</div>
          <div class="dialog-text">
            主要从事xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
          </div>
          <div class="dialog-img">
            <div class="img-item">
              <img src="@/assets/img/test_img/show_img3.jpg">
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #583228;
$border-color: #AF6F6B;
$title-color: #FF591F;
$text-color: #ECABAC;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 305px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
  word-break: break-all;

}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 100%;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;

  span {
    margin-left: 0;
  }

  .info-item {
    color: $text-color;

    .num {
      color: $text-color;
    }
  }
}

.infor-desc {
  font-size: 14px;
  word-break: break-all;
  color: $text-color;
  margin-bottom: 10px;

}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type8.vue

New file
@@ -0,0 +1,150 @@
<template>
  <!-- 信息弹窗七  企业-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">106路</div>
          <div class="info-container">
            <div class="info-item">
              <span class="lable">首班:</span>
              <span class="num">08:00</span>
            </div>
            <div class="info-item">
              <span class="lable">末班:</span>
              <span class="num">23:00</span>
            </div>
          </div>
          <div class="infor-desc">
            途经站点：xxx、xxx、xxx、xxx、xxx、xxx、 xxx、xxx。
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #1D3D61;
$border-color: #629BB9;
$title-color: #006EE4;
$text-color: #79B7D7;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 305px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
  word-break: break-all;

}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 100%;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;

  span {
    margin-left: 0;
  }

  .info-item {
    color: $text-color;
    margin-right: 25px;

    .num {
      color: #E5BF33;
    }
  }
}

.infor-desc {
  font-size: 14px;
  word-break: break-all;
  color: $text-color;
  margin-bottom: 10px;
}
</style>

 src/views/daoAnOffice/center/dialog/dialog-type9.vue

New file
@@ -0,0 +1,145 @@
<template>
  <!-- 信息弹窗七  企业-->
  <div class="dialog-container" ref="dialog">
    <div class="dialog-content">
      <el-scrollbar max-height="277px">
        <div class="scroll-content">
          <div class="dialog-title">xxx小区消防安全隐患</div>
          <div class="dialog-text">
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
          </div>
          <div class="dialog-img">
            <div class="img-item">
              <img src="@/assets/img/test_img/show_img4.jpeg">
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$bg-color: #50122B;
$border-color: #DC707F;
$title-color: #E90020;
$text-color: #E86E7F;

.dialog-container {
  position: relative;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: 5px;
  max-width: 305px;

  .dialog-content {
    width: 100%;
  }

  .scroll-content {
    width: 100%;
    padding: 14px 18px;
  }

  &:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 8px solid transparent;
    border-color: $bg-color transparent transparent transparent;
    content: '';
    z-index: 12;
    border-left-width: 6px;
    border-right-width: 6px;
  }

  &:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: 10px solid transparent;
    border-color: $border-color transparent transparent transparent;
    content: '';
    z-index: 10;
    border-left-width: 8px;
    border-right-width: 8px;
  }
}

.dialog-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: $title-color;
  line-height: 20px;
  margin-bottom: 13px;
}

.dialog-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: $text-color;
  line-height: 20px;
  margin-bottom: 13px;
  word-break: break-all;

}

.dialog-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .img-item {
    width: 100%;
    height: 125px;
    margin-bottom: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;

  span {
    margin-left: 0;
  }

  .info-item {
    color: $text-color;
    margin-right: 25px;

    .num {
      color: #E5BF33;
    }
  }
}

.infor-desc {
  font-size: 14px;
  word-break: break-all;
  color: $text-color;
  margin-bottom: 10px;
}
</style>

 src/views/daoAnOffice/center/map.vue

@@ -24,16 +24,36 @@
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
    </div>

    <!-- 导入自定义弹窗 -->
    <div class="dialog-container dialog">
      <DialogType1 ref="dtype1"></DialogType1>
      <DialogType2 ref="dtype2"></DialogType2>
      <DialogType3 ref="dtype3"></DialogType3>
      <DialogType4 ref="dtype4"></DialogType4>
      <DialogType5 ref="dtype5"></DialogType5>
      <DialogType6 ref="dtype6"></DialogType6>
      <DialogType7 ref="dtype7"></DialogType7>
      <DialogType8 ref="dtype8"></DialogType8>
      <DialogType9 ref="dtype9"></DialogType9>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onMounted, ref,getCurrentInstance } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

import { require } from '@/utils/require.js';
import DialogType1 from './dialog/dialog-type1.vue';
import DialogType2 from './dialog/dialog-type2.vue';
import DialogType3 from './dialog/dialog-type3.vue';
import DialogType4 from './dialog/dialog-type4.vue';
import DialogType5 from './dialog/dialog-type5.vue';
import DialogType6 from './dialog/dialog-type6.vue';
import DialogType7 from './dialog/dialog-type7.vue';
import DialogType8 from './dialog/dialog-type8.vue';
import DialogType9 from './dialog/dialog-type9.vue';

import icon1 from '@/assets/img/icon/icon1.png';
import icon2 from '@/assets/img/icon/icon2.png';
@@ -45,8 +65,23 @@
import icon8 from '@/assets/img/icon/icon8.png';
import icon9 from '@/assets/img/icon/icon9.png';

const dtype1 = ref(null);
const dtype2 = ref(null);
const dtype3 = ref(null);
const dtype4 = ref(null);
const dtype5 = ref(null);
const dtype6 = ref(null);
const dtype7 = ref(null);
const dtype8 = ref(null);
const dtype9 = ref(null);

const map = ref(null);

// dialog集合
const dialogList = ref({});
// 获取当前实例
const {ctx} = getCurrentInstance();

let mapInstance = null;
let trafficLayer = null;;

@@ -55,6 +90,9 @@

// 地图的图标数组
const markers = [];

// 信息弹窗
let infoWindow = null;

// 图列
const legendList = ref([
@@ -164,14 +202,29 @@
// 过滤图列
const filterLegend = (item) => {
  const { icon, positions, type } = item;
  const dialog = dialogList.value[type].$refs.dialog;
  const tempList = [];
  positions.map(position => {
    const markerIcon = createIcon(icon);
    const marker = ceateMarker(markerIcon, position);
    const marker = ceateMarker(type, markerIcon, position);
    tempList.push(marker);
    marker.on('click', (markerEvent) => {
      infoWindow.setContent(dialog);
      infoWindow.open(mapInstance, markerEvent.target.getPosition());
      // console.log(dialogList.value[type]);
    });
  });
  markers.push({ type: type, markerList: tempList })
  mapInstance.add(tempList);
}

// 创建弹窗
const createInfoWindow = () => {
  infoWindow = new AMap.InfoWindow({
    isCustom: true,
    closeWhenClickMap: true,
    offset: new AMap.Pixel(20, -20),
  });
}

// 创建图标
@@ -185,11 +238,12 @@


// 创建marker
const ceateMarker = (icon, position) => {
const ceateMarker = (type, icon, position) => {
  return new AMap.Marker({
    icon: icon,
    position: new AMap.LngLat(position[0], position[1]),
    zooms: [2, 20],
    extData: type
  });
}

@@ -222,6 +276,14 @@
}


// 弹窗与组件映射
const mapComponentInstance = () => {
  legendList.value.map((item) => {
    dialogList.value[item.id] = ctx.$refs[`dtype${item.id}`];
  })
}


onMounted(() => {
  AMapLoader.load({
    key: "2898109c22191c3969957500934169dc", //申请好的 Web 端开发者 Key，首次调用 load 时必填
@@ -243,14 +305,13 @@

      trafficLayer.setMap(mapInstance);


      // 限制一个区域轮廓
      const options = {
        subdistrict: 0,
        extensions: "all",
        level: "district",
      };

      // 限制一个区域轮廓
      AMap.plugin("AMap.DistrictSearch", function () {
        //在回调函数中实例化插件，并使用插件功能
        const district = new AMap.DistrictSearch(options);
@@ -290,7 +351,10 @@
          mapInstance.add(polygon);
        });
      });

      // 创建infowindow
      createInfoWindow();
      // 映射组件
      mapComponentInstance();
    })
    .catch((e) => {
      console.log(e);
@@ -400,4 +464,10 @@
:deep(.amap-copyright) {
  visibility: hidden !important;
}

.dialog {
  opacity: 0;
  position: absolute;
  left: -500px;
}
</style>