<!--
  Description: 高德地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换
}
// 地图实例
const map = ref()
//  用来画区域的
const polygon = ref()
//  画图工具实例
const mouseTool = ref()
// 区域数组
const pathArr = ref([
  [111.737806, 40.83386],
  [111.736806, 40.83686],
  [111.739906, 40.83686],
  [111.739906, 40.83386],
])
// 区域点数组
const markerArr = ref([
  [111.738956, 40.83476],
  [111.738956, 40.83676],
])
// 折现节点坐标
// const lineArr = ref([
//   [116.368904, 39.913423],
//   [116.382122, 39.901176],
//   [116.387271, 39.912501],
//   [116.398258, 39.904600],
// ])
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map('map', {
        viewMode: '2D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [111.737906, 40.83576],
        resizeEnable: true,
      })
      // 用来画区域的
      polygon.value = new AMap.Polygon({
        map: map.value,
        fillOpacity: 0.2,
        path: pathArr.value, // 区域数组
      })
      // 画图工具
      // mouseTool.value = new AMap.MouseTool(map.value)
      // mouseTool.value.rectangle({
      //   strokeColor: '#1E9FFF',
      //   strokeWeight: 2,
      //   strokeStyle: 'dashed',
      //   strokeOpacity: 1,
      //   fillOpacity: 0.1,
      //   fillColor: '#1E9FFF',
      //   // zIndex: 50,
      //   // 同Polygon的Option设置
      // })
      // var overlays = []
      // 监听draw事件可获取画好的覆盖物
      // mouseTool.value.on('draw', (e) => {
      // // 绘制多边形;
      //   overlays.push(e.obj)
      //   // 获取坐标;
      //   console.log(e.obj.getPath())
      //   // 格式化坐标;
      //   var polyPoints = e.obj.getPath()
      //   var arr = ''
      //   for (var i = 0; i < polyPoints.length; i++) {
      //     arr += `${polyPoints[i].lng},${polyPoints[i].lat};`
      //   }
      //   console.log(arr)// 121.540994,29.870174;121.55138,29.858116;121.55756,29.874193;
      // })
      // 标记点绘制
      for (let i = 0; i < markerArr.value.length; i++) {
        const icon = new AMap.Icon({
          size: new AMap.Size(36, 36), // 图标尺寸
          image: 'https://img1.baidu.com/it/u=783564618,4142196075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // Icon的图像
          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        })
        // const content = '<div>111</div>'
        const marker = new AMap.Marker({
          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          map: map.value,
          title: '测试坐标',
          icon,
          offset: new AMap.Pixel(-20, -20),
        })
        map.value.add([marker])
        // 自动适应显示想显示的范围区域
        // map.value.setFitView()
      }
      // 折现
      const path = [
        new AMap.LngLat(111.737506, 40.83476),
        new AMap.LngLat(111.738956, 40.83476),
        new AMap.LngLat(111.738956, 40.83676),
      ]
      const polyline = new AMap.Polyline({
        path,
        borderWeight: 1, // 线条宽度，默认为 1
        strokeColor: '#008d68', // 线条颜色
        lineJoin: 'round', // 折线拐点连接处样式
        strokeStyle: 'solid',
      })
      polyline.setMap(map.value)
      map.value.add(polyline)
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(() => {
  initMap()
})
</script>

<template>
  <div id="map" />
</template>

<style scoped>
#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>