CQ_JD
/
nazw


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name=”SiteName” content=”重庆市南岸区人民政府”>
  <meta name="SiteDomain" content="http://www.cqna.gov.cn" />
  <meta name="SiteIDCode" content="5001080014">
  <meta name="ColumnName" content="政务地图">
  <meta name="ColumnDescription" content="政务地图" />
  <meta name="ColumnKeywords" content="政务地图" />
  <meta name="ColumnType" content="政务地图" />
  <title>政务地图-重庆市南岸重庆区经开区</title>
  <!-- 引入 Vue -->
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/css/index.css">
  <!-- 引入组件库 -->
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/index.js"></script>
  <link rel="stylesheet" href="https://www.cqna.gov.cn/syygapi/naxsb/swiper/swiper-bundle.css">
  <!-- jquery-->
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript"
    src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
    </script>
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/urljson.js"></script>
  <script src="js/mapCity.js"></script>
  <!-- <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/mapCity.js"></script> -->
  <script src="https://www.cqna.gov.cn/syygapi/naxsb/js/mapPoint.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    li {
      list-style: none;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    @font-face {
      font-family: 'DOUYU';
      src: url('fonts/DOUYUFONT-2.woff');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Source Han Sans SC';
      src: url('fonts/MSYHL.TTC');
      font-weight: normal;
      font-style: normal;
    }

    .backbutton img {
      margin-right: 0.625rem;
    }

    #cytz {
      font-family: Microsoft YaHei;
      color: #FFFFFF;
      box-sizing: border-box;
      position: relative;
    }

    .content {
      /* height: calc(100% - 82px); */
      display: flex;
      background: #EDF5FF;
      padding: 0 15px 15px 15px;
    }

    #map {
      width: 60%;
      /* height: calc(100% - 10px); */
      margin-top: 10px;
      margin-right: 10px;
    }

    .contentR {
      width: 40%;
      height: 776px;
      padding-top: 20px;
      background-color: #fff;
    }

    .more {
      font-size: 16px;
      cursor: pointer;
    }

    .nodata {
      height: calc(100% - 10px);
      width: calc(100% - 40px);
      background-size: 100% 100%;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #B7C7DC;
      background: #192E47;
    }

    .toplogo img {
      margin-bottom: 17px;
      margin-right: 10px;
    }

    .toplogo {
      padding-left: 10px;
      display: flex;
      align-items: center;
      font-family: DOUYU;
      font-weight: normal;
      font-size: 30px;
      color: #fff;
      height: 66px;
      cursor: pointer;
    }

    .backbutton {
      width: 117px;
      height: 42px;
      background: #539EDD;
      border-radius: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .backbutton img {
      margin-right: 10px;
    }

    .topList {
      height: 55px;
      background: #2A77B9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    .topList .list {
      font-size: 20px;
      color: #FFFFFF;
      line-height: 30px;
      cursor: pointer;
    }

    .topList .active {
      font-weight: bold;
      border-bottom: 2px solid #fff;
    }

    .content .con {
      background: #FFFFFF;
      height: calc(100% - 55px);
      padding: 20px;
      box-sizing: border-box;
    }

    .con .title {
      font-size: 18px;
      color: #333333;
      border-bottom: 1px solid #DCDCDC;
      padding: 0 5px;
      line-height: 30px;
      cursor: pointer;
      padding-bottom: 10px;
    }

    .con .opendiv {
      background: #E9F5FF;
      padding: 0 15px;
      margin: 0 5px;
      padding-top: 15px;
    }

    .con .opendiv>div {
      display: flex;
      align-items: center;
    }

    .con .opendiv>div img {
      margin-right: 10px;
    }

    .con .btn {
      width: 136px;
      height: 72px;
      background-size: 100% 100%;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 60px;
      text-align: center;
      cursor: pointer;
    }

    .con .active .title {
      color: #2A77B9;
      border-bottom: 1px solid #2A77B9;
    }

    .el-pagination {
      height: 60px;
      text-align: center;
    }

    .mapchoise {
      font-size: 18px;
      display: flex;
      margin-left: 40px;
    }

    .mapchoise>.mbtn {
      height: 39px;
      color: #FFFFFF;
      background-color: #192E47;
      border-radius: 4px;
      display: flex;
      border: 1px solid #FFFFFF;

    }

    .mbtn .mbtn1 {
      width: 67px;
      text-align: center;
      height: 39px;
      line-height: 39px;
      letter-spacing: 5px;
      cursor: pointer;
    }

    .mbtn .active {
      background-color: #fff;
      color: #192E47;
    }

    .minput {
      display: flex;
      width: 490px;
      height: 40px;
      background: #FFFFFF;
      border-radius: 4px;
      align-items: center;
      margin-left: 10px;
    }

    .minput input {
      border: none;
      font-size: 18px;
    }

    .minput input::placeholder {
      font-size: 18px;
    }

    .sel_n .sel_body_name {
      width: 300px;
    }

    .el-tabs__content {
      height: calc(100% - 20px);
      overflow-y: scroll;
    }

    .el-tabs {
      height: 100%;
    }

    ul li {
      cursor: pointer;
    }

    .warp_choice {
      display: flex;
      align-items: center;
      margin: 10px 0 5px;
    }

    .warp_choice span {
      color: #FF780B;
      font-size: 14px;
    }

    #startPanel p {
      width: 100%;
      margin: 0 auto;
      color: #666666;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor: default;
    }

    #startPanel p.change_text_color {
      color: #2775CC;
    }

    #startPanel li {
      cursor: pointer;
    }

    #startPanel li:hover {
      background-color: #E9F3FF;
      cursor: pointer;
    }

    #endPanel p {
      width: 100%;
      margin: 0 auto;
      color: #666666;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor: default;
    }

    #endPanel li {
      cursor: pointer;
    }

    #endPanel li:hover {
      background-color: #E9F3FF;
      cursor: pointer;
    }

    .startChoice {
      display: inline-block;
      width: 83px;
      height: 30px;
      background: #FFFFFF;
      border: 1px solid #ccc;
      outline: none;
      cursor: pointer;
      margin-top: 5px;
      line-height: 30px;
      text-align: center;
    }

    .endChoice {
      display: inline-block;
      width: 83px;
      height: 30px;
      background: #FFFFFF;
      border: 1px solid #ccc;
      outline: none;
      cursor: pointer;
      margin-top: 5px;
      line-height: 30px;
      text-align: center;
    }

    .hideEnd {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div style="width:100%;" class="header"></div>
  <div class="" id="zwfw">
    <div class="top">
      <div style="display: flex;align-items: center;">
        <div class="toplogo">
          <img src="https://www.cqna.gov.cn/syygapi/naxsb/image/gyylogowhite.png" alt="">
          <span>政务地图</span>
        </div>
        <div class="mapchoise" v-show="currentMapType=='bus'||currentMapType=='drive'||currentMapType=='choicePoint'">
          <div class="mbtn">
            <div class="mbtn1" :class="{active:currentMapType=='bus'||currentMapnow=='bus'}" @click="mapbtnClick('bus')"
              style="border-radius: 4px 0px 0px 4px;">公交</div>
            <div class="mbtn1" :class="{active:currentMapType=='drive'||currentMapnow=='drive'}"
              @click="mapbtnClick('drive')" style="border-radius: 0px 4px 4px 0px;">自驾</div>
          </div>
          <div class="minput">
            <el-input placeholder="请输入起点" v-model="startPlace"></el-input>
            <img src="images/right-grey.png" alt="">
            <el-input placeholder="请输入终点" v-model="endPlace"></el-input>
            <img src="images/serchmap.png" alt="" style="margin-right: 10px;cursor: pointer;" @click="searchRoute">
          </div>
        </div>
      </div>
      <div class="backbutton" @click="window.location.href='qjt.html'">
        <img src="https://www.cqna.gov.cn/syygapi/naxsb/images/backlogo.png" alt="">
        <span>返回</span>
      </div>
    </div>
    <div class="content">
      <div id="map"></div>
      <div class="contentR">
        <div v-show="currentMapType!='bus'&&currentMapType!='drive'&&currentMapType!='choicePoint'"
          style="height: 100%;">
          <div class="topList">
            <div v-for="(item,index) in districtLevelTitle" :key="item.id" @click="getListData(item.id)" class="list"
              :class="{active : currentid == item.id}">
              {{item.name}}</div>
            <img src="images/mapBack.png" alt="" v-if="currentItem==4" @click="mapBac" style="cursor: pointer;">
          </div>
          <div class="con">
            <div style="overflow-y: scroll;height: 100%;">
              <!-- 区级中心、分中心 -->
              <div v-for="(item,index) in districtLevelLists" style="margin-bottom: 20px;"
                :class="{active : currentList == item.id}" @click="openListData(item.id,item)"
                v-if="(currentid==998||currentid==999)&&currentItem==1">
                <div class="title">{{item.title}}</div>
                <div class="opendiv" v-show="currentList == item.id">
                  <div><img src="images/zw.addr.png" alt="">{{item.address}}</div>
                  <div style="margin-top: 15px;"><img src="images/zw-tel.png" alt="">{{item.tel}}</div>
                  <div style="display: flex;">
                    <div style="background-image: url(images/btn-tyy2.png);" class="btn" @click="getRoute('bus')">公交
                    </div>
                    <div style="background-image: url(images/btn-tyy1.png);" class="btn" @click="getRoute('drive')">自驾
                    </div>
                    <div style="background-image:url(images/btn-tyy.png);" class="btn" v-if="formData.vrUrl"
                      @click="goHtmlFun1(item.id,item.vrUrl)">全景地图
                    </div>
                  </div>
                </div>
              </div>
              <!-- 镇街便民服务中心 -->
              <div v-for="(item,index) in districtLevelList1" style="margin-bottom: 20px;"
                :class="{active : currentList == item.id}" @click="openListData1(item.id)"
                v-if="currentid==26&&currentItem==2">
                <div class="title">{{item.title}}</div>
                <div class="opendiv" v-show="currentList == item.id">
                  <div><img src="images/zw.addr.png" alt="">{{formData.address}}</div>
                  <div style="margin-top: 15px;"><img src="images/zw-tel.png" alt="">{{formData.tel}}</div>
                  <div style="display: flex;">
                    <div style="background-image: url(images/btn-tyy2.png);" class="btn" @click="getRoute('bus')">公交
                    </div>
                    <div style="background-image: url(images/btn-tyy1.png);" class="btn" @click="getRoute('drive')">自驾
                    </div>
                    <div style="background-image:url(images/btn-tyy.png);" class="btn"
                      @click="goHtmlFun(formData.vrUrl)" v-if="formData.vrUrl">全景地图
                    </div>
                  </div>
                </div>
              </div>

              <!-- 村社便民服务站第一层 -->
              <div v-for="(item,index) in districtLevelList1" style="margin-bottom: 20px;"
                @click="openListData2(item.id)" v-if="currentid==27&&currentItem==3">
                <div class="title">{{item.callout.content}}</div>
              </div>
              <!-- 村社便民服务站第二层 -->
              <div v-for="(item,index) in districtLevelList3" style="margin-bottom: 20px;"
                :class="{active : currentList == item.id}" @click="openListData3(item.id)" v-if="currentItem==4">
                <div class="title" v-if="index!=0">{{item.title}}</div>
                <div class="opendiv" v-show="currentList == item.id">
                  <div><img src="images/zw.addr.png" alt="">{{formData.address}}</div>
                  <div style="margin-top: 15px;"><img src="images/zw-tel.png" alt="">{{formData.tel}}</div>
                  <div style="display: flex;">
                    <div style="background-image: url(images/btn-tyy2.png);" class="btn" @click="getRoute('bus')">公交
                    </div>
                    <div style="background-image: url(images/btn-tyy1.png);" class="btn" @click="getRoute('drive')">自驾
                    </div>
                    <div style="background-image:url(images/btn-tyy.png);" class="btn"
                      @click="goHtmlFun(formData.vrUrl)" v-if="formData.vrUrl">全景地图
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog title="路线查询" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
          <div style="display: flex;align-items: center;justify-content: center;">
            <span style="white-space: nowrap;color: #333;font-size: 20px;">起点：</span>
            <el-input v-model="startPlace" placeholder="请输入起点"
              style="width: 300px;border: 1px solid #D7D7D7;border-radius:4px;"></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogMesure"
              style="width: 298px;height: 50px;background: #2A77B9;border-radius: 10px;color: #fff;font-size: 18px;">确 定
            </el-button>
          </span>
        </el-dialog>
        <div
          style="padding: 5px 10px;box-sizing:border-box;position: relative;height: calc(100% - 20px);overflow-y: scroll;"
          v-show="currentMapType == 'choicePoint'" class="left-map">
          <div>请选择起点</div>
          <ul v-html="startPanel" id="startPanel"></ul>
        </div>
        <div v-show="currentMapType=='bus'" style="height: calc(100% - 30px);position: relative;">
          <el-button @click="backlast" style="position: absolute;right:10px;top:-6px;z-index: 9999;">返回</el-button>
          <el-tabs v-model="activebusName" @tab-click="busClick">
            <el-tab-pane label="推荐路线" name="BMAP_TRANSIT_POLICY_LEAST_TIME">
              <div id="BMAP_TRANSIT_POLICY_LEAST_TIME"></div>
            </el-tab-pane>
            <el-tab-pane label="少换成" name="BMAP_TRANSIT_POLICY_LEAST_TRANSFER">
              <div id="BMAP_TRANSIT_POLICY_LEAST_TRANSFER"></div>
            </el-tab-pane>
            <el-tab-pane label="少步行" name="BMAP_TRANSIT_POLICY_LEAST_WALKING">
              <div id="BMAP_TRANSIT_POLICY_LEAST_WALKING"></div>
            </el-tab-pane>
            <el-tab-pane label="不乘地铁" name="BMAP_TRANSIT_POLICY_AVOID_SUBWAYS">
              <div id="BMAP_TRANSIT_POLICY_AVOID_SUBWAYS"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-show="currentMapType=='drive'" style="height: calc(100% - 30px);position: relative;">
          <el-button @click="backlast" style="position: absolute;right:10px;top:-6px;z-index: 9999;">返回</el-button>
          <el-tabs v-model="activedriveName" @tab-click="driveClick">
            <el-tab-pane label="推荐路线" name="BMAP_DRIVING_POLICY_LEAST_TIME">
              <div id="BMAP_DRIVING_POLICY_LEAST_TIME"></div>
            </el-tab-pane>
            <el-tab-pane label="最短路程" name="BMAP_DRIVING_POLICY_LEAST_DISTANCE">
              <div id="BMAP_DRIVING_POLICY_LEAST_DISTANCE"></div>
            </el-tab-pane>
            <el-tab-pane label="不走高速" name="BMAP_DRIVING_POLICY_AVOID_HIGHWAYS">
              <div id="BMAP_DRIVING_POLICY_AVOID_HIGHWAYS"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div style="width:100%;" class="footer"></div>
</body>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq"></script>
<script>
  $(function () {
    $(".header").load('https://www.cqna.gov.cn/syygapi/naxsb/top/top_style.html');
    $(".footer").load('https://www.cqna.gov.cn/syygapi/naxsb/footer/footer.html');
  });
</script>
<script>
  function isMobileUserAgent() {
    return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
      window.parent.navigator.userAgent.toLowerCase("")
    );
  }

  if (isMobileUserAgent()) {
    window.location = 'https://www.cqna.gov.cn/syygapi/naxsb/mobile/zwfwMapMobile.html'
  }
</script>
<script>
  new Vue({
    el: '#zwfw',
    data: function () {
      return {
        currentid: 1,
        currentList: null,
        currentItem: 1,
        currentMapnow: null,
        currentMapType: null,
        districtLevelTitle: [
          {
            id: 998,
            name: '区级中心'
          },
          {
            id: 999,
            name: '分中心'
          },
          {
            id: 26,
            name: '镇街便民服务中心'
          },
          {
            id: 27,
            name: '村社便民服务站'
          }
        ],
        districtLevelList: [],
        districtLevelLists: [],
        districtLevelList1: [],
        districtLevelList3: [],
        current: 0,
        districtLevelTotal: 0,
        map: {},
        formData: {},
        startPlace: '',
        endPlace: '',
        startPoint1: [],
        endPoint: [],
        activedriveName: 'BMAP_DRIVING_POLICY_LEAST_TIME',
        activebusName: 'BMAP_TRANSIT_POLICY_LEAST_TIME',
        dialogVisible: false,
        startPanel: '',
        endPanel: '',
      }
    },
    created() {
      this.qjzxData = qjzxData;
      this.fzxData = fzxData;
    },
    mounted() {

      this.loadMap();
      this.bindEvents();
    },
    methods: {
      loadMap() {
        var that = this;
        fetch('https://www.cqna.gov.cn/syygapi/naxsb/js/najson.json')
          .then(response => response.json())
          .then(data => {
            var centerPoint = data.features[0].properties.center;
            var map = new BMap.Map("map");
            map.enableScrollWheelZoom();
            map.enableDragging();
            map.centerAndZoom(new BMap.Point(106.662444, 29.53282), 12);
            map.setMapType(BMAP_NORMAL_MAP);
            var pointList = data.features[0].geometry.coordinates[0][0];
            let result = [];
            pointList.forEach(function (point) {
              result.push(new BMap.Point(point[0], point[1]));
            });
            let polygon = new BMap.Polygon(result, {
              strokeColor: "#226cfb",
              strokeWeight: 1.5,
              strokeOpacity: 1,
              strokeStyle: "dashed",
              // fillColor: "#4B98F6",
              fillOpacity: 0.2
            });
            map.addOverlay(polygon);
            that.map = map;
            that.currentid = that.districtLevelTitle[0].id;
            that.getListData(that.districtLevelTitle[0].id, that.districtLevelTitle[0].name)
          })
          .catch(error => console.error('Error fetching JSON:', error));
      },
      getListData(id) {
        this.currentid = id;
        this.currentList = null;
        var allOverlay = this.map.getOverlays();
        for (var i = 0; i < allOverlay.length; i++) {
          if (allOverlay[i].id == "detaiId") {
            this.map.removeOverlay(allOverlay[i]);
          }
        }
        this.map.centerAndZoom(new BMap.Point(106.662444, 29.53282), 12);
        var _this = this;
        if (id == 998) {
          this.currentItem = 1;
          _this.current = 1
          _this.districtLevelTotal = this.qjzxData.length
          _this.districtLevelList = this.qjzxData
          _this.districtLevelLists = this.qjzxData;
          _this.showListPoint(this.districtLevelLists);
        } else if (id == 999) {
          this.currentItem = 1;
          _this.current = 1
          _this.districtLevelTotal = this.fzxData.length
          _this.districtLevelList = this.fzxData
          _this.districtLevelLists = this.fzxData;
          _this.showListPoint(this.districtLevelLists);
        } else {
          if (this.currentid == 26) {
            this.currentItem = 2;
          } else if (this.currentid == 27) {
            this.currentItem = 3;
          }
          this.districtLevelList1 = marks;
          this.showListPoint(this.districtLevelList1);
        }
      },
      getRoute(currentMapType) {
        this.currentMapnow = currentMapType;
        this.dialogVisible = true;
      },
      backlast() {
        // this.currentMapType = 'choicePoint'
        this.loadMap();
        this.currentMapType = '';
        this.currentList = '';
        this.currentid = 1;
        this.startPoint1 = [];
        this.startPlace = '';
        this.getListData(1)
      },
      searchRoute() {
        if (this.currentMapType == 'bus') {
          this.busClick();
        } else if (this.currentMapType == 'drive') {
          this.driveClick();
        }
      },
      mapbtnClick(currentMapType) {
        this.currentMapType = currentMapType;
        this.currentMapnow = currentMapType;
        if (this.currentMapType == 'bus') {
          this.busClick();
        } else if (this.currentMapType == 'drive') {
          this.driveClick();
        }
      },
      busClick(tab, event) {
        var discriptHtml = '';
        var _this = this;
        var transit = new BMap.TransitRoute(_this.map, {
          renderOptions: {
            map: _this.map,
            panel: _this.activebusName
          },
          policy: 0,
          onSearchComplete: function (results) {
            if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
              discriptHtml = '';
              return;
            } else {
              discriptHtml += '<div>在重庆市 '
              discriptHtml += '未能计算出从“'
              discriptHtml += _this.startPlace
              discriptHtml += '”到“'
              discriptHtml += _this.endPlace
              discriptHtml += '”公交路线，抱歉。'
              discriptHtml += '</div>'
              $('#' + _this.activebusName).empty().append(discriptHtml);
              _this.map.centerAndZoom(new BMap.Point(106.563, 29.523), 14);
            }
          }
        });
        this.map.clearOverlays();
        transit.clearResults();
        transit.setPolicy(this.activebusName);
        var p1 = new BMap.Point(this.startPoint1[0], this.startPoint1[1]);
        var p2 = new BMap.Point(this.endPoint[0], this.endPoint[1]);
        transit.search(p1, p2);
      },
      driveClick(tab, event) {
        var discriptHtml = '';
        var _this = this;
        var drivingRoute = new BMap.DrivingRoute(_this.map, {
          renderOptions: {
            map: _this.map,
            panel: _this.activedriveName,
            autoViewport: true,
            enableDragging: true
          }
        });
        this.map.clearOverlays();
        drivingRoute.clearResults();
        drivingRoute.setPolicy(this.activedriveName);
        var p1 = new BMap.Point(this.startPoint1[0], this.startPoint1[1]);
        var p2 = new BMap.Point(this.endPoint[0], this.endPoint[1]);
        drivingRoute.search(p1, p2);
      },
      handleClose() {
        this.dialogVisible = false;
      },
      dialogMesure() {
        this.dialogVisible = false;
        this.endPlace = this.formData.address;
        this.endPoint = [this.formData.longitude, this.formData.latitude];
        this.currentMapType = 'choicePoint'
        this.startLocation(this.startPlace)
      },
      // 封装起点的地址选择
      startLocation(startZD) {
        var startResults = null;
        var _this = this;
        var startOption = {
          onSearchComplete: function (results) {
            // 判断状态是否正确
            if (startSearch.getStatus() == BMAP_STATUS_SUCCESS) {
              startResults = results;
              var openStartInfoHtml = '';
              for (var i = 0; i < results.getCurrentNumPois(); i++) {
                var startcount = i + 1;
                openStartInfoHtml += "<li data-add='" + results.getPoi(i).address + "' data-text='" + results.getPoi(i).title + "' data-lng='" + results.getPoi(i).point.lng + "' data-lat='" + results.getPoi(i).point.lat + "' class='openstartinfo'>"
                openStartInfoHtml += "<div class='warp_choice'>"
                openStartInfoHtml += "<span>" + startcount + ".</span>"
                openStartInfoHtml += "<p>"
                openStartInfoHtml += results.getPoi(i).title
                openStartInfoHtml += "</p>"
                openStartInfoHtml += "</div>"
                openStartInfoHtml += "<p>地址："
                if (results.getPoi(i).address == undefined) {
                  openStartInfoHtml += results.getPoi(i).title
                } else {
                  openStartInfoHtml += results.getPoi(i).address
                }
                openStartInfoHtml += "</p></div>"
                openStartInfoHtml += "<a class='startChoice hideEnd'>选为起点</a>"
                openStartInfoHtml += "</li>"
              }
              _this.startPanel = openStartInfoHtml
            } else {
              startResults = null;
            }
          }
        };
        var startSearch = new BMap.LocalSearch(this.map, startOption);
        startSearch.search(startZD);
      },
      bindEvents() {
        $(document).on('mouseover', '.openstartinfo', function () {
          $(this).children('.startChoice').removeClass('hideEnd');
        });
        $(document).on('mouseleave', '.openstartinfo', function () {
          $(this).children('.startChoice').addClass('hideEnd');
        });
        var _this = this;
        $(document).on('click', '.openstartinfo', function () {
          _this.map.clearOverlays();
          _this.startPoint1 = [$(this).data("lng"), $(this).data("lat")];
          startPoint = new BMap.Point($(this).data("lng"), $(this).data("lat"));
          _this.startPoint = $(this).data("text");
          _this.map.setCenter(startPoint);
          _this.map.addOverlay(new BMap.Marker(startPoint));
          $(this).find('p').addClass('change_text_color').parents('li').siblings().find('p').removeClass('change_text_color');
          _this.currentMapType = _this.currentMapnow;
          if (_this.currentMapnow == 'bus') {
            _this.busClick();
          } else if (_this.currentMapnow == 'drive') {
            _this.driveClick();
          }
        });
      },
      mapBac() {
        this.currentItem = 3;
        this.map.centerAndZoom(new BMap.Point(106.662444, 29.53282), 12);
        var allOverlay = this.map.getOverlays();
        for (var i = 0; i < allOverlay.length; i++) {
          if (allOverlay[i].id == "detaiId") {
            this.map.removeOverlay(allOverlay[i]);
          }
        }
      },
      showDetailPoint(pointLists) {
        var that = this;
        pointLists.forEach(function (item) {
          var x1 = item.longitude;
          var y1 = item.latitude;
          var name = item.title;
          let p = new BMap.Point(x1, y1);
          var myIcon = new BMap.Icon("images/zwMapicon.png", new BMap.Size(43, 48), {
            offset: new BMap.Size(10, 25),
          });
          let marker = new BMap.Marker(p, { icon: myIcon });
          marker.id = "detaiId";
          that.map.addOverlay(marker);
          var opts = {
            position: new BMap.Point(x1, y1),
            offset: new BMap.Size(10, 10)
          };

          var label = new BMap.Label(name, opts);

          label.setStyle({
            color: "#333333",
            fontSize: "14px",
            height: "auto",
            lineHeight: "20px",
            fontFamily: "微软雅黑",
            backgroundColor: '#fff',
            border: '1px solid #646464'
          });

          marker.setLabel(label);
          marker.addEventListener('click', function () {
            that.openListData3(item.id, item.title);
          });
        });
      },
      showListPoint(pointLists) {
        var that = this;
        var allOverlay = that.map.getOverlays();
        for (var i = 0; i < allOverlay.length; i++) {
          if (allOverlay[i].id == "zbId") {
            that.map.removeOverlay(allOverlay[i]);
          }
        }
        pointLists.forEach(function (item) {
          var x1 = item.longitude;
          var y1 = item.latitude;
          if (that.currentid == 26 || that.currentid == 27) {
            var name = item.callout.content;
          } else {
            var name = item.title;
          }
          let p = new BMap.Point(x1, y1);
          var myIcon = new BMap.Icon("images/zwActiveicon.png", new BMap.Size(43, 48), {
            offset: new BMap.Size(10, 25),
          });
          let marker = new BMap.Marker(p, { icon: myIcon });
          marker.id = "zbId";
          that.map.addOverlay(marker);
          var opts = {
            position: new BMap.Point(x1, y1),
            offset: new BMap.Size(10, 10)
          };

          var label = new BMap.Label(name, opts);

          label.setStyle({
            color: "#333333",
            fontSize: "14px",
            height: "auto",
            lineHeight: "20px",
            fontFamily: "微软雅黑",
            backgroundColor: '#fff',
            border: '1px solid #646464'
          });

          marker.setLabel(label);
          marker.addEventListener('click', function () {
            var allOverlay = that.map.getOverlays();
            for (var i = 0; i < allOverlay.length; i++) {
              if (allOverlay[i].id == "detaiId") {
                that.map.removeOverlay(allOverlay[i]);
              }
            }
            if (that.currentid == 26) {
              that.openListData1(item.id);
            } else if (that.currentid == 27) {
              that.openListData2(item.id);
            } else {
              that.openListData(item.id, item);
            }
          });
        });
      },
      goHtmlFun1(id, vrUrl) {
        window.open(vrUrl)
      },
      goHtmlFun(vrUrl) {
        window.open(vrUrl)
      },
      openListData(id, item) {
        this.currentList = id;
        this.formData = item
      },
      openListData1(id) {
        this.currentList = id;
        var formData = this.districtLevelList1.find(item => item.id === id);
        var url = 'https://www.cqna.gov.cn/vr/jiedao/' + vrUrl[formData.id] + '/tour.html';
        this.formData = {
          id: formData.id,
          title: formData.title,
          address: formData.address,
          latitude: formData.latitude,
          longitude: formData.longitude,
          tel: formData.phones,
          vrUrl: url,
        }
        // this.map.centerAndZoom(new BMap.Point(formData.longitude, formData.latitude), 16);
        // this.showDetailPoint(cityMark[id].filter((element, index) => index !== 0));
      },

      openListData2(id) {
        var formData = this.districtLevelList1.find(item => item.id === id);
        this.districtLevelList3 = cityMark[formData.id]
        this.map.centerAndZoom(new BMap.Point(formData.longitude, formData.latitude), 16);
        this.showDetailPoint(cityMark[formData.id].filter((element, index) => index !== 0))
        this.currentItem = 4;
      },
      openListData3(id, item) {
        this.currentList = id;
        var nowformdata = this.districtLevelList3.find(item => item.id === id);
        var formData = mapVcAddress[id];
        this.formData = {
          id: id,
          title: formData.name,
          address: formData.address,
          tel: formData.phone,
          latitude: nowformdata.latitude,
          longitude: nowformdata.longitude
        }
        this.map.centerAndZoom(new BMap.Point(this.formData.longitude, this.formData.latitude), 16);
      }
    }
  });
</script>

</html>