<template>
  <div id="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

<script>
  // 使用npm安装的方式
  import AMapLoader from '@amap/amap-jsapi-loader';

  export default {
    name: 'MapComponent',
    data() {
      return {
        map: null,
        adCode: 610100,
        depth: 2,
        disProvince: null,
        areas: [
          {"NAME_CHN":"灞桥区","adcode":"610111","position":[109.067,34.267],"color":"rgba(248,159,189,0.5)"},
          {"NAME_CHN":"新城区","adcode":"610102","position":[108.959,34.269],"color":"rgba(246,217,158,0.5)"},
          {"NAME_CHN":"碑林区","adcode":"610103","position":[108.946,34.251],"color":"rgba(241,183,126,0.5)"},
          {"NAME_CHN":"未央区","adcode":"610112","position":[108.946,34.308],"color":"rgba(244,136,244,0.5)"},
          {"NAME_CHN":"雁塔区","adcode":"610113","position":[108.926,34.213],"color":"rgba(139,239,139,0.5)"},
          {"NAME_CHN":"莲湖区","adcode":"610104","position":[108.933,34.265],"color":"rgba(139,205,237,0.5)"},
          {"NAME_CHN":"长安区","adcode":"610116","position":[108.941,34.157],"color":"rgba(228,191,116,0.5)"},
          {"NAME_CHN":"高陵区","adcode":"610117","position":[109.088,34.535],"color":"rgba(227,139,51,0.5)"},
          {"NAME_CHN":"渭城区","adcode":"610404","position":[108.73,34.336],"color":"rgba(218,93,134,0.5)"},
          {"NAME_CHN":"泾阳县","adcode":"610423","position":[108.837,34.528],"color":"rgba(48,126,197,0.5)"},
        ],
        positions: [
          {"name":"南飞鸿·乐境雅荟", "position": [108.847924,34.223347]},
          {"name":"华洲城·云顶", "position": [108.85,34.24]},
          {"name":"翡丽西安", "position": [108.93,34.29]},
          {"name":"太奥青年家", "position": [108.89,34.28]},
          {"name":"领航云熙", "position": [108.88,34.24]},
          {"name":"德通昆仑序", "position": [108.86,34.24]},
          {"name":"信达雁熙云著", "position": [108.92,34.22]},
          {"name":"领航云熙", "position": [108.88,34.24]},
        ]
      }
    },
    mounted() {
      this.initMap();
      // this.initAreaName();
      // this.initPosition();
    },
    methods: {
      async initMap() {
        try {
          // 如果使用npm安装的方式
          const AMap = await AMapLoader.load({
            key: 'cc8ff23d740efe79b8ed53578f78c10c',
            version: '2.0', // 高德地图SDK版本号
            plugins: ['AMap.Marker', 'AMap.Geolocation', 'AMap.Scale', 'AMap.ToolBar', 'AMap.DistrictLayer'], // 按需加载的插件列表
          });
          this.map = new AMap.Map('mapContainer', {
            resizeEnable: true,
            center: [108.947083, 34.264369], // 地图中心点
            zoom: 13, // 地图显示的缩放级别
            pitch: 0,
            viewMode: '3D',
          });
          console.log("222" + this.map)
          console.log("111" + this.map)
          this.depth = typeof this.depth == 'undefined' ? 2 : this.depth;
          this.disProvince && this.disProvince.setMap(null);
          console.log("333" + this.map.DistrictLayer)
          this.disProvince = this.map.DistrictLayer.Province({
            zIndex: 12,
            adcode: [this.adCode],
            depth: this.depth,
            opacity: 0.6,
            styles: {
              'fill': function (properties) {
                // properties为可用于做样式映射的字段，包含
                // NAME_CHN:中文名称
                // adcode_pro
                // adcode_cit
                // adcode
                console.log(properties)
                var adcode = properties.adcode;
                return this.getColorByAdcode(this.adcode);
              },
              'province-stroke': 'cornflowerblue',
              'city-stroke': 'white', // 中国地级市边界
              'county-stroke': 'rgba(11,10,10,0.5)' // 中国区县边界
            }
          });
          this.disProvince.setMap(this.map);
        } catch (e) {
          console.error(e);
        }
      },
      // initPro() {
      //   console.log("111" + this.map)
      //   this.depth = typeof this.depth == 'undefined' ? 2 : this.depth;
      //   this.disProvince && this.disProvince.setMap(null);
      //   console.log("333" + this.map.DistrictLayer)
      //   this.disProvince = this.map.DistrictLayer.Province({
      //     zIndex: 12,
      //     adcode: [this.adCode],
      //     depth: this.depth,
      //     opacity: 0.6,
      //     styles: {
      //       'fill': function (properties) {
      //         // properties为可用于做样式映射的字段，包含
      //         // NAME_CHN:中文名称
      //         // adcode_pro
      //         // adcode_cit
      //         // adcode
      //         console.log(properties)
      //         var adcode = properties.adcode;
      //         return this.getColorByAdcode(this.adcode);
      //       },
      //       'province-stroke': 'cornflowerblue',
      //       'city-stroke': 'white', // 中国地级市边界
      //       'county-stroke': 'rgba(11,10,10,0.5)' // 中国区县边界
      //     }
      //   });
      //   this.disProvince.setMap(this.map);
      // },
      // getColorByAdcode(adcode) {
      //   // 判断 adcode 是否在 colors 中
      //   for (var i = 0; i < this.areas.length; i++) {
      //     if (this.areas[i].adcode == adcode) {
      //       return this.areas[i].color;
      //     }
      //   }
      // },
      // initAreaName() {
      //   // 循环便利positions
      //   for (var i = 0; i < this.areas.length; i++) {
      //     var position = this.areas[i].position;
      //     // 点标记显示内容，HTML要素字符串
      //     var markerContent = '' +
      //       '<div class="custom-content-marker">' +
      //       '   <div class="area_name"><b>' + this.areas[i].NAME_CHN + '</b></div>' +
      //       '</div>';
      //     var marker = new AMap.Marker({
      //       position: position,
      //       // 将 html 传给 content
      //       content: markerContent,
      //       // 以 icon 的 [center bottom] 为原点
      //       offset: new AMap.Pixel(-13, -30)
      //     });
      //
      //     // 将 markers 添加到地图
      //     this.map.add(marker);
      //   }
      // },
      // initPosition() {
      //   // 循环便利positions
      //   for (var i = 0; i < this.positions.length; i++) {
      //     var position = this.positions[i].position;
      //     // 点标记显示内容，HTML要素字符串
      //     var markerContent = '' +
      //       '<div class="custom-content-marker">' +
      //       '   <div class="marker_name" onclick="getMarker()"><b>' + this.positions[i].name + '</b></div>' +
      //       '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
      //       '</div>';
      //     var marker = new AMap.Marker({
      //       position: position,
      //       // 将 html 传给 content
      //       content: markerContent,
      //       // 以 icon 的 [center bottom] 为原点
      //       offset: new AMap.Pixel(-13, -30)
      //     });
      //
      //     // 将 markers 添加到地图
      //     this.map.add(marker);
      //   }
      // },
      // getMarker() {
      //
      // }
    }
  }
</script>
