vue3 setup语法 高德地图 点聚合 不下载任何插件 找不到名称“AMap”

在 Vue3 的 `setup` 函数中，可以使用 `ref` 函数创建响应式数据，使用 `onMounted` 函数在组件挂载时执行操作。

关于高德地图点聚合，需要先在 `index.html` 中引入高德地图 JavaScript API 的 SDK，并在 `setup` 函数中使用 `onMounted` 函数异步加载 SDK 完成后再使用。

以下是一个示例代码：

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

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const mapInstance = ref(null) // 地图实例
    const markers = ref([]) // 标记点数组

    onMounted(() => {
      // 异步加载高德地图 SDK
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://webapi.amap.com/maps?v=1.4.15&key=<your_amap_key>&callback=initMap`
      document.body.appendChild(script)

      // 初始化地图
      window.initMap = () => {
        const map = new window.AMap.Map('map', {
          zoom: 13,
          center: [116.39, 39.9],
          viewMode: '3D', // 开启3D视图
          pitch: 45, // 俯仰角度
          rotation: -20 // 地图旋转角度
        })
        mapInstance.value = map

        // 创建标记点
        const marker1 = new window.AMap.Marker({
          position: [116.397428, 39.90923]
        })
        const marker2 = new window.AMap.Marker({
          position: [116.397428, 39.90924]
        })
        markers.value = [marker1, marker2]

        // 添加标记点到地图
        map.add(markers.value)

        // 加载点聚合插件
        const AMapUI = window.AMapUI || {}
        AMapUI.loadUI(['misc/MarkerClusterer'], function (MarkerClusterer) {
          // 初始化点聚合
          new MarkerClusterer(map, markers.value, {
            gridSize: 80,
            maxZoom: 15,
            zoomOnClick: true
          })
        })
      }
    })

    return {
      mapInstance
    }
  }
}
</script>

需要注意的是，需要在 `AMapUI.loadUI` 方法中加载点聚合插件，而不是直接使用 `AMap.MarkerClusterer`。另外，需要替换代码中的 `<your_amap_key>` 为自己的高德地图开发者密钥。