Nuxt3中使用高德地图案例

在Nuxt3中使用高德地图，可以通过以下步骤实现：

1. 在`nuxt.config.js`文件中引入高德地图的JS API，可以使用异步加载的方式，例如：

head: {
  script: [
    {
      src: 'https://webapi.amap.com/maps?v=1.4.15&key=yourkey',
      async: true,
      defer: true
    }
  ]
}

2. 在需要使用地图的组件中，可以通过`mounted`钩子函数初始化地图，并添加多边形等元素，例如：

mounted() {
  // 初始化地图
  const map = new AMap.Map('map-container', {
    zoom: 10,
    center: [116.39, 39.9]
  })

  // 添加多边形
  const polygon = new AMap.Polygon({
    path: [
      [116.403322, 39.920255],
      [116.410703, 39.897555],
      [116.402292, 39.892353],
      [116.389846, 39.891365]
    ],
    strokeColor: '#FF33FF',
    strokeWeight: 6,
    strokeOpacity: 0.2,
    fillColor: '#1791fc',
    fillOpacity: 0.4
  })
  map.add(polygon)

  // 点击按钮触发编辑多边形事件
  const editBtn = document.getElementById('edit-btn')
  editBtn.addEventListener('click', () => {
    polygon.setOptions({
      editable: true
    })
  })
}

3. 如果需要在多个组件中使用地图，可以考虑将地图的初始化和添加元素的代码封装成一个插件，例如：

// plugins/aMap.js
import AMap from 'AMap'

export default {
  install: (app) => {
    // 初始化地图
    const map = new AMap.Map('map-container', {
      zoom: 10,
      center: [116.39, 39.9]
    })

    // 添加多边形
    const polygon = new AMap.Polygon({
      path: [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
      ],
      strokeColor: '#FF33FF',
      strokeWeight: 6,
      strokeOpacity: 0.2,
      fillColor: '#1791fc',
      fillOpacity: 0.4
    })
    map.add(polygon)

    // 注册地图实例到Vue实例中
    app.config.globalProperties.$map = map
    app.config.globalProperties.$polygon = polygon
  }
}

在需要使用地图的组件中，可以通过`this.$map`和`this.$polygon`访问地图实例和多边形实例。