vue 中使用高德地图以及三级联动跳转到下一级区域

最新推荐文章于 2024-04-25 09:07:58 发布

BUG创建者

最新推荐文章于 2024-04-25 09:07:58 发布

阅读量4.4k

点赞数

分类专栏： vue 高德地图

本文链接：https://blog.csdn.net/wzwzwz555/article/details/103314602

版权

vue 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

高德地图

1 篇文章 1 订阅

订阅专栏

效果图

1.安装插件:

npm install vue-amap --save

2.脚本初始化,main.js中

import Vue from 'vue';
import AMap from 'vue-amap';

import App from './App.vue';
import router from './router';

Vue.use(AMap);
AMap.initAMapApiLoader({
key: '你的key',
//plugin  所用到的插件
plugin:   plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.DistrictSearch','AMap.Geocoder']
});

const app = new Vue({ // eslint-disable-line
router,
render: h => h(App)
}).$mount('#app');

3.在index.html中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>gaode</title>



    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key='你的key'&plugin=AMap.Geocoder&plugin=AMap.DistrictSearch"></script>



  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4.项目中使用

<template lang="html">
<div id="amap-cointainer">

</div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
mounted() {

lazyAMapApiLoaderInstance.load().then(() => {

this.maps = new AMap.Map('amap-cointainer', {resizeEnable: true,

        center: [116.397428, 39.90923],

        zoom: 4});

});

var that=this

  var list=[  [116.376907,39.910967],

        [116.384911,39.919505],

        [116.40109,39.919728],

        [116.411132,39.911408],

        [116.412076,39.899135],

        [116.402292,39.892353],

        [116.3874,39.892518],

        [116.376971,39.899267]]

that.GaodeMap(list)

that.mprovince();


},
methods:{
   mprovince() {
      // 行政区划查询
      let opts = {
        subdistrict: 1, // 返回下一级行政区
        showbiz: false // 最后一级返回街道信息
      };
      this.district = new AMap.DistrictSearch(opts); // 注意：需要使用插件同步下发功能才能这样直接使用
      this.district.search("中国", (status, result) => {
        if (status === "complete") {
          
          this.getData(result.districtList[0]);
        }
      });
    },
    getData(data, level) {
     debugger
      let citySelect = document.getElementById("city");
      let districtSelect = document.getElementById("district");
      let areaSelect = document.getElementById("street");
      let bounds = data.boundaries;
      if (bounds) {
        for (let i = 0, l = bounds.length; i < l; i++) {
          let polygon = new AMap.Polygon({
            map: this.maps,
            strokeWeight: 1,
            strokeColor: "#0091ea",
            fillColor: "#80d8ff",
            fillOpacity: 0.2,
            path: bounds[i]
          });
          this.polygons.push(polygon);
        }
        this.maps.setFitView(); // 地图自适应
      }
      debugger
      // 清空下一级别的下拉列表
      if (level === "province") {
        citySelect.innerHTML = "";
        districtSelect.innerHTML = "";
        areaSelect.innerHTML = "";
      } else if (level === "city") {
        districtSelect.innerHTML = "";
        areaSelect.innerHTML = "";
      } else if (level === "district") {
        areaSelect.innerHTML = "";
      }
      let subList = data.districtList;
      if (subList) {
        let contentSub = new Option("--请选择--");
        let curlevel = subList[0].level;
        let curList = document.querySelector("#" + curlevel);
        curList.add(contentSub);
        for (let i = 0, l = subList.length; i < l; i++) {
          let name = subList[i].name;
          let levelSub = subList[i].level;
          let cityCode = subList[i].citycode;
          contentSub = new Option(name);
          contentSub.setAttribute("value", levelSub);
          contentSub.center = subList[i].center;
          contentSub.adcode = subList[i].adcode;
          curList.add(contentSub);
        }
      }
    },

    mapsearch(e) {
      // 清除地图上所有覆盖物
      // obj.srcElement.options.selectedIndex
      ;
      let that = this;
      var obj = e.currentTarget;

      for (let i = 0, l = that.polygons.length; i < l; i++) {
        that.polygons[i].setMap(null);
      }
      debugger
      // let option = obj.srcElement[obj.srcElement.options.selectedIndex]
      var option = obj[obj.options.selectedIndex];
      var keyword = option.text; //关键字
      var adcode = option.adcode;
      that.district.setLevel(option.value); // 行政区级别
      that.district.setExtensions("all");
      // 行政区查询
      // 按照adcode进行查询可以保证数据返回的唯一性
      that.district.search(adcode, function(status, result) {
        if (status === "complete") {
          that.getData(result.districtList[0], obj.id);
        }
      });
    },
    setCenter(e) {
      var that = this;
      var obj = e.target;
      obj[obj.options.selectedIndex].center;
      debugger;
      
      that.maps.setCenter(obj[obj.options.selectedIndex].center);
    },
    GaodeMap(list) {
      var that = this;
     
      var map=  that.maps;
     
      function StructureTypefunc(DataSerial) {
      
        for (let i = 0; i < that.StructureTypeArr.length; i++) {
          if (DataSerial == that.StructureTypeArr[i].DataSerial) {
            return that.StructureTypeArr[i].DictData;
          }
        }
      }

      var markers = [];
      var positions = list;
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      for (var i = 0, marker; i < positions.length; i++) {
        marker = new AMap.Marker({
          map: map,
          icon:
            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          clickable: true,
          position: positions[i].point
        });
        marker.id = positions[i].bridgeid;

        marker.setTitle(
          positions[i].BridgeName +
            positions[i].BridgeSerial +
            "\n" +
            "点击查看详情"
        );
       


        marker.content = 'content';
        marker.on("click", markerClick);
        marker.emit("click", { target: marker });
        markers.push(marker);
        that.closeInfoWindow();
      }
      function markerClick(e) {
        e.target.id;
        //  e.target.content=info( e.target.id)

        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      $("body").on("click", "#tiao", function(event) {
        var id = event.target.getAttribute("data-name");
        that.$router.push({ name: "RealMonitor", query: { id: id } });
      });
      var num = 0;
      $("body").on("click", "#left", function(event) {
        num--;

        if (num < 0) {
          num = 0;
          return;
        } else {
          $("#img").css("transform", "translate(-" + num * 60 + "px)");
        }
      });
      $("body").on("mouseover", ".imgcontent", function(e) {
        var path = e.target.src;
        $("#bigimgbox").css("display", "block");
        $("#bimgs").attr("src", path);
      });
      $("body").on("mouseleave", ".imgcontent", function(e) {
        $("#bigimgbox").css("display", "none");
      });

      $("body").on("click", "#right", function(event) {
        num++;

        if (num < $("#img img").length) {
          $("#img").css("transform", "translate(-" + num * 60 + "px)");
          // $(this).siblings('div').find('.infoImg').css("transform", 'translate(-' + 200 * frame + 'px)')
        } else if (num >= $("#img img").length) {
          num = $("#img img").length - 1;
          return;
        }
      });
    },
    closeInfoWindow() {
      var that = this;
      // that.maps.clearInfoWindow();
    },
},
destroyed() {
    if(!!this.maps){
        this.maps.destroy();
    }
}
};
</script>

<style lang="css">
#amap-cointainer {
height: 200px;
}
</style>