地图修改

odc.xiaohui

2024-02-29 48ede89bf3b0a18f3be5ff05d95877e3d1a05465

 src/views/daoAnOffice/chartgd.vue

@@ -1,41 +1,81 @@
<template>
  <div class="home">
    <div id="map-box"></div>
<!--    <div class="btn">-->
<!--      <el-button type="primary" @click="btnsubmit">确定</el-button>-->
<!--    </div>-->
    <div  style="position: absolute;bottom: 0;left: 0">
      <el-button @click="btnlk" type="primary">实时路况</el-button>
      <el-button @click="toggleTrafic">地图切换</el-button>
    <div  style="position: absolute;bottom: 20%;right: 35%;z-index: 999">
      <div @click="btnlk" class="item-tb">
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
      <div @click="toggleTrafic" class="item-tb">
        <p class="item-tb-p">地图切换</p>
        <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
      </div>

    </div>
    <div class="info-box">
<!--      right菜单-->
      <div class="info-div" @click="accidentProneRoadSections">
        事故易发多发路段
        <img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>事故易发多发路段</p>
          <p>78</p>
        </div>
      </div>
      <div class="info-div" @click="keyTouristChannels">
        重点旅游通道
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>重点旅游通道</p>
         <p>178</p>
       </div>
      </div>
      <div class="info-div">
        都江堰景区
        <img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>都江堰景区</p>
         <p>278</p>
       </div>
      </div>
      <div class="info-div" @click="policeForceDeployment">
        警力配备
        <img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>警力配备</p>
          <p>348</p>
        </div>
      </div>
      <div class="info-div" @click="fencingConstruction">
        打围施工
        <img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>打围施工</p>
         <p>578</p>
       </div>
      </div>
      <div class="info-div">
        交通事故易发点
        <img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>交通事故易发点</p>
          <p>788</p>
        </div>
      </div>
      <div class="info-div" @click="keyTransportationEnterprises">
        重点运输企业
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>重点运输企业</p>
         <p>758</p>
       </div>
      </div>
      <div class="info-div">
        公交线路
        <img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
      <div class="info-div-p">
        <p>公交线路</p>
        <p>785</p>
      </div>
      </div>
      <div class="info-div">
        安全隐患
        <img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>安全隐患</p>
         <p>718</p>
       </div>
      </div>

<!--      搜索-->
@@ -61,6 +101,7 @@
<script lang="ts" setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import {Pointer} from "@element-plus/icons-vue";

const map = shallowRef(null);
const keyword = ref('');
@@ -642,24 +683,59 @@
  margin: 0px;
  position: relative;
  .info-div{
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-top: 0.5rem;
    background-color: #4E2749;
    //background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;
    .item-tb-img{
      width: 20px;
      height: 20px;
    }
    .info-div-p{
      flex: 1;
      margin-left: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .info-box {
    position: absolute;
    top: 8px;
    right: 8px;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    background-color: #131F3F;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    //background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
  .item-tb{
      cursor: pointer;
    margin-top: 20px;
    .item-tb-img{
      width: 65px;
    }
    .item-tb-p{
      line-height:35px;
      //background: #00adb5;
      color:#fff;
      text-align: center;
      text-shadow:
          0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
    }
  }
}
.ul{
  margin-top: 10px;