<!--
  Description: 高德地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
const $props = defineProps({
  init: {
    type: Array,
    default: () => [],
  },
})
const $emit = defineEmits(['confirm'])
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换
}
// 地图实例
const map = ref()
const AMap1 = ref()
// 地图点击事件
const clickHandler = function (e) {
  const location = [e.lnglat.getLng(), e.lnglat.getLat()]
  $emit('confirm', location)
  // 在该点添加标记点
  map.value.clearMap()
  const AMap = AMap1.value
  const marker = new AMap.Marker({
    position: location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  })
  map.value.add(marker)
}
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      AMap1.value = AMap
      // 初始化地图
      map.value = new AMap.Map('map-location', {
        viewMode: '3D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [116.26755900, 39.91547100],
        resizeEnable: true,
      })
      map.value.clearMap()
      if ($props.init.length) {
        const marker = new AMap.Marker({
          position: $props.init, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        })
        map.value.add(marker)
        map.value.setFitView()
      }
      // // 创建引入搜索组件
      // const placeSearch = new AMap.PlaceSearch({
      //   pageSize: 5, // 单页显示结果条数
      //   pageIndex: 1, // 页码
      //   // city: "010", // 兴趣点城市
      //   citylimit: true, // 是否强制限制在设置的城市内搜索
      //   map: map.value, // 展现结果的地图实例
      //   // panel: 'panel', // 结果列表将在此容器中进行展示。
      //   autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      // })
      // setTimeout(() => {
      //   placeSearch.search('北京大学', function (status, result) {
      //     console.log(status, result)
      //     // 查询成功时，result即对应匹配的POI信息
      //   })
      // }, 2000)
      // 绑定事件
      map.value.on('click', clickHandler)
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(async () => {
  initMap()
})
onBeforeUnmount(() => {
  // 解绑事件
  map.value.off('click', clickHandler)
})
</script>

<template>
  <div id="map-location" />
</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;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.amap-sug-result {
  z-index: 9999 !important;
}
</style>