高德记录

📘 高德地图（AMap）Vue3 使用文档（项目实践版）

✨ 技术栈

• Vue 3 + TypeScript
• Element Plus
• AMap JS API v2.x / v1.x（视项目引入方式而定）
• 项目集成方式支持 CDN 方式或通过 @amap/amap-jsapi-loader

---

🛠️ 一、地图初始化

import AMapLoader from '@amap/amap-jsapi-loader';

let map: AMap.Map;

export const initAMap = (containerId: string): Promise<AMap.Map> => {
  return AMapLoader.load({
    key: '你的高德Key',
    version: '2.0',
    plugins: ['AMap.Marker', 'AMap.LabelMarker', 'AMap.InfoWindow', 'AMap.Circle'],
  }).then((AMap) => {
    map = new AMap.Map(containerId, {
      center: [114.305, 30.592], // 默认中心点
      zoom: 11,
      resizeEnable: true,
    });
    return map;
  });
};

---

📍 二、添加普通 Marker 图层

export const createMarkerLayer = (points: Array<{ lng: number; lat: number }>) => {
  const markers: AMap.Marker[] = points.map((p) => {
    return new AMap.Marker({
      position: [p.lng, p.lat],
    });
  });
  return new AMap.LayerGroup(markers);
};

---

🏷️ 三、添加 LabelMarker 图层（适用于聚合/省市级标注）

export const createLabelMarkerLayer = (labels: Array<{ lng: number; lat: number; name: string }>) => {
  const layer = new AMap.LabelsLayer({ zooms: [3, 20] });
  labels.forEach((item) => {
    const labelMarker = new AMap.LabelMarker({
      position: [item.lng, item.lat],
      text: { content: item.name, direction: 'center' },
      zooms: [3, 20],
    });
    layer.add(labelMarker);
  });
  return layer;
};

---

🧲 四、Marker 聚合

import AMapLoader from '@amap/amap-jsapi-loader';

export const createCluster = (map: AMap.Map, points: Array<AMap.Marker>) => {
  AMap.plugin('AMap.MarkerClusterer', () => {
    const cluster = new AMap.MarkerClusterer(map, points, {
      gridSize: 80,
      renderClusterMarker: (context) => {
        context.marker.setContent(`<div style="background:#409EFF;color:white;border-radius:50%;padding:5px;">${context.count}</div>`);
      },
    });
  });
};

---

🔵 五、绘制圆形区域（例如采集点附近）

export const addCircle = (map: AMap.Map, lngLat: AMap.LngLat, radius = 1000) => {
  const circle = new AMap.Circle({
    center: lngLat,
    radius,
    fillColor: '#80d8ff',
    strokeColor: '#007aff',
    fillOpacity: 0.2,
    strokeWeight: 2,
  });
  map.add(circle);
  return circle;
};

export const removeAllCircles = (map: AMap.Map) => {
  const circles = map.getAllOverlays('circle');
  circles.forEach((c) => map.remove(c));
};

---

💬 六、自定义 InfoWindow 弹窗

export const showInfoWindow = (map: AMap.Map, position: [number, number], html: string) => {
  const infoWindow = new AMap.InfoWindow({
    content: html,
    offset: new AMap.Pixel(0, -30),
  });
  infoWindow.open(map, position);
};

---

🧭 七、图层控制逻辑（示例）

// 切换商家/采集/聚合图层
const handleChangeLayer = (type: string) => {
  map.remove([markerLayer, labelLayer]); // 清除当前图层
  removeAllCircles(map);                 // 清除所有圆

  switch (type) {
    case '商家':
      map.setZoom(11);
      map.add(markerLayer);
      break;
    case '采集':
      map.setZoom(14);
      addCircle(map, new AMap.LngLat(114.3, 30.5));
      break;
    case '聚合':
      map.setZoom(6);
      map.add(labelLayer);
      break;
  }
};