<template>
  <!-- <div class="map-container">
    <div id="container" ref="mapRef"></div>
  </div> -->

  <div class="tourism">
    <div style="background-color: #ffffff">
      <div id="container"></div>
    </div>
  </div>
</template>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted } from "vue";
import gansuLine from "./gansu.json";
let map = null;
// 注意：要想市级区域正常显示，必须添加安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
};
// 初始化地图
const handleInitMap = () => {
  AMapLoader.load({
    key: "c691971f068b92c897fb908c4ddef6d4", // 申请好的Web端开发者Key
    version: "2.0",
    plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "2D",
        zoom: 4, //初始化地图级别
        center: [113.808299, 34.791787], //初始化地图中心点位置
        mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
      });
      let districtSearch = new AMap.DistrictSearch({
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "province", //查询行政级别为 市 province-省 district-市
      });
      // handleDistrict(districtSearch);
      addPolylines();
      handleAddMarket();
    })
    .catch((e) => {
      console.log(e);
    });
};
// 高亮和描边
const handleDistrict = (districtSearch) => {
  let polygons = [];
  // let arr = ["湖北省", "湖南省"]; //此处为高亮的市名
  districtSearch.search("中华人民共和国", function (status, result) {
    // 查询成功时，result即为对应的行政区信息
    // map.remove(polygons); //清除上次结果
    let bounds = result.districtList[0].boundaries;
    if (bounds) {
      for (let i = 0, l = bounds.length; i < l; i++) {
        //生成行政区划polygon
        let polygon = new AMap.Polygon({
          strokeWeight: 1,
          path: bounds[i],
          fillOpacity: 0.4,
          fillColor: "#80d8ff",
          strokeColor: "#0091ea",
        });
        polygons.push(polygon);
      }
    }
    // 描边
    for (let i = 0; i < bounds.length; i++) {
      let outerPolyline = new AMap.Polyline({
        path: bounds[i],
        strokeColor: "#0435F9",
        strokeWeight: 3,
        map: map,
      });
      map.add(outerPolyline);
    }
    map.add(polygons);
    map.setFitView(polygons); //视口自适应
  });
};
// 添加新路线
const addPolylines = () => {
  let geojsonObj = new AMap.GeoJSON({
    geoJSON: gansuLine,
    getPolyline: function (geojson, lnglats) {
      // 生成路线
      let polylineObj = new AMap.Polyline({
        path: lnglats,
        strokeWeight: 4,
        strokeColor: "red",
        extData: geojson.properties, // 自定义属性数据
      });
      // 生成新的路线，用于覆盖旧的
      const newPolyline = new AMap.Polyline({
        path: lnglats,
        strokeWeight: 4,
        strokeColor: "#00DDEB",
        isOutline: true,
        borderWeight: 2,
        outlineColor: "rgba(0, 221, 235, 1)",
      });
      map.add(newPolyline);
      newPolyline.hide();
      // 获取路线数据
      const properties = polylineObj.getExtData();
      // 填报内容
      let content = `
        <div class="infoWindow">
          <p class="infoWindow-title">${properties.name}</p>
        </div>
        `;
      // 创建 infoWindow 实例
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        autoMove: true, // 是否自动调整窗体到视野内
        closeWhenClickMap: true, // 控制是否在鼠标点击地图后关闭信息窗体
        content: content, // 传入 dom 对象，或者 html 字符串
        offset: new AMap.Pixel(120, 100),
      });

      // 鼠标经过
      polylineObj.on("mouseover", function (e) {
        console.log(e, "243234");
        newPolyline.show();
        infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
      });
      // 鼠标移出
      polylineObj.on("mouseout", function (e) {
        newPolyline.hide();
        infoWindow.close();
      });

      // 鼠标双击
      polylineObj.on("dblclick", function (e) {
        const data = polylineObj.getExtData();
        // showProject(data);
      });
      return polylineObj;
    },
  });
  map.add(geojsonObj);
};
// 添加标记
const handleAddMarket = () => {
  const markers = [];
  const positionsList = [
    {
      number: 1,
      position: [116.405467, 39.907761],
    },
    {
      number: 5,
      position: [114.298569, 30.584354],
    },
    {
      number: 6,
      position: [117.190186, 39.125595],
    },
    {
      number: 4,
      position: [112.549248, 37.857014],
    },
    {
      number: 8,
      position: [123.429092, 41.796768],
    },
    {
      number: 2,
      position: [121.472641, 31.231707],
    },
    {
      number: 7,
      position: [119.306236, 26.075302],
    },
    {
      number: 9,
      position: [106.504959, 29.533155],
    },
    {
      number: 6,
      position: [91.1145, 29.64415],
    },
    {
      number: 3,
      position: [101.77782, 36.61729],
    },
    {
      number: 8,
      position: [87.61688, 43.82663],
    },
    {
      number: 10,
      position: [111.75199, 40.84149],
    },
    {
      number: 9,
      position: [126.642464, 45.756966],
    },
  ];

  for (var i = 0, marker; i < positionsList.length; i++) {
    marker = new AMap.Marker({
      map: map,
      position: positionsList[i].position,
      // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      offset: new AMap.Pixel(-13, -30),
      content:
        "" +
        '<div class="custom-content-marker">' +
        '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">' +
        `<div class="anchorPoint"">${positionsList[i].number}</div>` +
        "</div>",
    });
    markers.push(marker);
  }
  map.add([markers]);
};
onMounted(() => {
  handleInitMap();
});
</script>

<style scoped lang="less">
.tourism {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#container {
  padding: 0px;
  margin: 0px auto;
  width: 100%;
  height: 800px;
}
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}
/deep/.infoWindow {
  color: #fff;
  background-image: url("../assets/images/infoWindow.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  // line-height: 32px;
  // padding: 1px 0 25px 25px;
  padding-left: 30px;
  // padding-top: 8px;
  width: 315px;
  height: 220px;
}
/deep/.infoWindow-title {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  height: 70px;
  line-height: 70px;
  .font(16);
  font-weight: 700;
}
/deep/.infoWindow-content {
  .font(24);
  position: relative;
  span {
    display: inline-block;
    position: absolute;
    top: -50%;
  }
}
/deep/.anchorPoint {
  position: absolute;
  color: #fff;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
