<template>
  <div id="container"></div>
</template>
<script>
export default {
  data() {
    return {
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      //map:null,
      adcode: "310000",
      dep: 2,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "9a18085d520884e61312cba93787a8f2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.MapType"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            center: [121.43333, 31.2],
            layers: [
              AMap.createDefaultLayer(), //高德默认标准图层
            ],
            zoom: 9.5,
          });
          this.map.addControl(new AMap.MapType()); //图层切换，用于几个常用图层切换显示
          //console.log(AMap.DistrictLayer.Province);
          var disProvince = new AMap.DistrictLayer.Province({
            zIndex: 12,
            adcode: ["310000"],
            depth: 2,
            styles: {
              fill: "rgba(161,207,251,0.5)",
              "province-stroke": "blue",
              "city-stroke": "white", // 中国地级市边界
              "county-stroke": "blue", // 中国区县边界
            },
          });
          disProvince.setMap(this.map);
          //this.map.addControl(new AMap.DistrictSearch()); //行政区查询服务，提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
          this.map.on("click", function (ev) {
            var px = ev.pixel;
            var props = disProvince.getDistrictByContainerPos(px); // 拾取所在位置的行政区
            //console.log(props);
            //disProvince.setDistricts(props.adcode + ''); // 显示当前点击的省份
            var NAME_CHN = props.NAME_CHN;
            disProvince.setStyles({
              // 国境线
              //nation-stroke': nationStroke,
              // 海岸线
              //'coastline-stroke': '',
              "province-stroke": "blue",
              "city-stroke": "white", // 中国地级市边界
              "county-stroke": "blue", // 中国区县边界
              fill: function (props) {
                return props.NAME_CHN == NAME_CHN
                  ? "rgba(161,207,251,0.8)"
                  : "rgba(161,207,251,0.5)";
              },
            });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>
<style lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  .amap-copyright {
    opacity: 0;
    display: none;
  }
  .amap-ctrl-overlay-layer {
    display: none;
  }
}
</style>
