如何做一个点击行政区，后地图切换到不同的行政区边界呢，并且悬浮高亮？（高德地图）

 仅提供思路以及部分关键代码

示例：

 

 

 

一、首先使用json-server自定义数据

注：json-server可以自行查询如何配置

 

 全国的省市区json数据地址：http://t.csdn.cn/PMm5K

 二、进行高德地图的key值申请

自行注册申请，选择WEB端即可

 

 

 三、安装插件

npm i @amap/amap-jsapi-loader --save

npm i axios

四、进行网络请求配置

1、新建utils/result.js

import axios from "axios";

axios.defaults.baseURL = "http://localhost:8000/";

export const get = function (url, data, header) {
  return axios.get(url, { params: data, ...header });
};

2、新建network/city.js

import { get } from "../utils/request";

//获取城市数据
export const getLocation = function () {
  return get("/location");
};

五、页面的划分，左右两块组件

新建组件，左侧树状菜单为Menu.vue，右侧地图为Map.vue

且引入至App.vue中

<template>
  <div id="app" class="full">
    <div class="left-menu">
      <m-menu @handler="getnowLoc"></m-menu>
    </div>
    <div class="right-map">
      <m-map :name="name"></m-map>
    </div>
  </div>
</template>

<script>
import Menu from "./components/Menu.vue";
import Map from "./components/Map.vue";
export default {
  name: "App",
  components: {
    [Menu.name]: Menu,
    [Map.name]: Map,
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    getnowLoc(params) {
      this.name = params.value;
    },
  },
};
</script>

<style>
#app {
  display: flex;
}
.left-menu {
  width: 190px;
}
.right-map {
  flex: 1;
}
</style>

Menu.vue代码，其中进行了获取我们的json-server数据，并且用element-ui的Tree树状控件展示。

在点击节点后使用$emit进行传递当前行政区的名称

<template>
  <div class="menu">
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      :highlight-current="true"
      accordion
    ></el-tree>
  </div>
</template>

<script>
import { getLocation } from "../network/city";
export default {
  name: "m-menu",
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "value",
      },
    };
  },
  async created() {
    let res = await getLocation();
    this.treeData = res.data;
  },
  methods: {
    handleNodeClick(data) {
      this.$emit("handler", data);
    },
  },
};
</script>

<style scoped>
.menu {
  height: 100%;
  overflow-y: scroll;
}
.menu::-webkit-scrollbar {
  width: 3px;
}
</style>

Map代码，其中需要注意的点是全局密钥和引入一样，要在全局，这里所用到高德地图的Api为：行政区边界查询-行政区划查询-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

各位可以自行查阅，进行配置

<template>
  <!-- 地图区域 -->
  <div id="bai-du-map" class="full"></div>
</template>

<script>
// 引入AMapLoader
import AMapLoader from "@amap/amap-jsapi-loader";
//全局密钥
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "--Web端安全密钥--",
};
export default {
  name: "m-map",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      AMap: null,
      district: null,
      polygon: null,
    };
  },
  created() {
    this.initMap();
  },
  watch: {
    name() {
      this.drawBounds();
    },
  },
  methods: {
    async initMap() {
      let AMap = await AMapLoader.load({
        key: "--Web端Key--",
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.DistrictSearch"], // 这里需要使用的的插件列表，如比例尺'AMap.Scale'等
      });
      this.AMap = AMap;
      // 初始化地图
      this.map = new AMap.Map("bai-du-map", {
        viewMode: "2D", //  是否为3D地图模式
        zoom: 13, // 初始化地图级别
        center: [116.397428, 39.90923], //中心点坐标
        resizeEnable: true,
      });
    },
    drawBounds: function () {
      //加载行政区划插件
      if (!this.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district", //查询行政级别为 市
        };
        this.district = new this.AMap.DistrictSearch(opts);
      }
      //行政区查询
      this.district.setLevel("district");
      this.district.search(this.$props.name, (status, result) => {
        if (this.polygon) {
          this.map.remove(this.polygon); //清除上次结果
          this.polygon = null;
        }
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          //生成行政区划polygon
          for (var i = 0; i < bounds.length; i += 1) {
            //构造MultiPolygon的path
            bounds[i] = [bounds[i]];
          }
          this.polygon = new this.AMap.Polygon({
            strokeWeight: 1,
            path: bounds,
            fillOpacity: 0.4,
            fillColor: "#80d8ff",
            strokeColor: "#0091ea",
          });
          //区域内悬浮
          this.polygon.on("mouseover", () => {
            this.polygon.setOptions({
              fillOpacity: 0.7,
              fillColor: "#7bccc4",
            });
          });
          //离开区域
          this.polygon.on("mouseout", () => {
            this.polygon.setOptions({
              fillOpacity: 0.5,
              fillColor: "#ccebc5",
            });
          });
          
          this.map.add(this.polygon);
          this.map.setFitView(this.polygon); //视口自适应
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

不太会解释代码，如配置过程有问题可以私信，偶尔看