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

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch,defineProps } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
// @ts-ignore
window._AMapSecurityConfig = {
  securityJsCode: '0c4dce68b8380eb47ad26dbea2cff570',
}
const props = defineProps(['maoItem'])
const map = <any>ref(null)
const marker = <any>ref(null)
    const timer = <any>ref(null)
const initMap = () => {
  AMapLoader.load({
    key: '37b09e9ef9458d8e987b9351420563ab', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map.value = new AMap.Map('container', {
        //设置地图容器id
        viewMode: '2D', //是否为3D地图模式
        zoom: 20, //初始化地图级别
        // center: [address.lon,address.lat], //初始化地图中心点位置
      })
    //   const markerContent = `<div class="custom-content-marker">
    //                               <img src="https://a.amap.com/jsapi/static/image/plugin/marker/end.png">
    //                               <div class="close-btn" onclick="clearMarker()"></div>
    //                           </div>`
    // const loaction = props.maoItem.location.split(',')
    // console.log(loaction,'loaction');
    
    //   const position = [loaction[0], loaction[1]] //Marker 经纬度
    //   marker.value = new AMap.Marker({
    //     position: position,
    //     content: markerContent, //将 html 传给 content
    //     offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
    //     // 设置是否可以拖拽
    //     draggable: true,
    //     cursor: 'move',
    //     // 设置拖拽效果
    //     raiseOnDrag: true,
    //   })
    //   map.add(marker)
    //   marker.on('dragging',draggingMap)
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(() => {
    initMap()
})
initMap()
const draggingMap = () => {
      // 判断是否已经设置了定时器
      if (timer.value) {
        clearTimeout(timer.value); // 清除之前的定时器
      }

      // 设置新的定时器
      timer.value = setTimeout(() => {
        console.log('最新坐标：', marker.getPosition());
        var coordinate = marker.getPosition();

        //反查地址-S
        let geocoder;
        AMap.plugin('AMap.Geocoder', function () {
          geocoder = new AMap.Geocoder();
        });

        geocoder.getAddress([coordinate.lng, coordinate.lat], (status:any, result:any) => {
          if (status === 'complete' && result.info === 'OK') {
            console.log('地址获取成功：', result.regeocode.formattedAddress);
            // console.log(result);
            fetch(
              `https://restapi.amap.com/v3/place/text?key=42dab0116529aa771fc2b1094174ce00&keywords=${form.locateAddress}`,
            ).then((res) => {
              res.json().then((resoult) => {

                // options = resoult.pois.map((item) => {
                //   return  {value:item.address,label:item.address}
                // });
                console.log(resoult, '1111111111');
              });
            });
          }
        });
      }, 500); // 设置执行间隔为0.5秒
    }
</script>

<style lang="scss" scoped>
.map{
    width: 100%;
    height: 100%;
    #container{
        width: 100%;
    height: 100%;
    }
}
</style>
