Sive
高德地图可视化
可视化

高德地图可视化

当用户需要基于高德地图 JavaScript API 构建中国境内的位置与路径应用时，使用此 Skill。该库擅长：2D 地图、3D 地图、矢量地图、卫星地图、路网图、实时路况图、建筑楼块图、室内地图、点标记图、海量标注图、文本标记图、圆点图、折线路线图、贝塞尔曲线图、多边形区域图、圆形地理围栏图、椭圆区域图、矩形区域图、GeoJSON 专题图、点聚合图、热力图、行政区划图、轨迹动画图、驾车路线图、步行路线图、骑行路线图、公交路线图、货车路线图、POI 分布图。不要用于全球通用或自定义瓦片地图，也不要用于不依赖高德位置服务的普通数据图表。

去使用
yvonneyx
yvonneyx
浏览1,407
使用179

Skill 文件

SKILL.md
name
amap-bindbindmap
title
高德地图可视化
description
当用户需要基于高德地图 JavaScript API 构建中国境内的位置与路径应用时，使用此 Skill。该库擅长：2D 地图、3D 地图、矢量地图、卫星地图、路网图、实时路况图、建筑楼块图、室内地图、点标记图、海量标注图、文本标记图、圆点图、折线路线图、贝塞尔曲线图、多边形区域图、圆形地理围栏图、椭圆区域图、矩形区域图、GeoJSON 专题图、点聚合图、热力图、行政区划图、轨迹动画图、驾车路线图、步行路线图、骑行路线图、公交路线图、货车路线图、POI 分布图。不要用于全球通用或自定义瓦片地图，也不要用于不依赖高德位置服务的普通数据图表。

高德地图可视化

在单个 HTML 文件中使用高德地图 JS API 2.0 创建交互式地图。中国境内地图精度高、合规，支持丰富的地图服务。

核心依赖 (CDN 内联 script)

html
<​script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"​><​/script​>

Key 配置：

  • 正式环境需前往 注册并创建应用获取 Web 端 (JS API) Key
  • 如无配置，默认使用官方提供的测试 Key（见下方 HTML 模板）

加载后全局可用：AMap 对象

HTML 模板

html
<!DOCTYPE html><​html lang="zh-CN"​><​head​>  <​meta charset="UTF-8" /​>  <​meta name="viewport" content="width=device-width, initial-scale=1.0" /​>  <​title​>高德地图<​/title​>  <​script​>    // 高德地图配置（生产环境请替换为自己的 Key 和 Security Code）    const amapKey = "eb810c4e87aa71f5c5e476491c7d6bd0";  <​/script​>  <​script id="amap-script"​><​/script​>  <​script​>    // 动态加载高德地图 API    document.getElementById('amap-script').src =       `https://webapi.amap.com/maps?v=2.0&key=${amapKey}`;  <​/script​>  <​style​>    * { margin: 0; padding: 0; box-sizing: border-box; }    #map { width: 100vw; height: 100vh; }  <​/style​><​/head​><​body​>  <​div id="map"​><​/div​>  <​script​>    // 1. 创建地图实例    const map = new AMap.Map('map', {      zoom: 12,      center: [116.397428, 39.90923], // [经度, 纬度] — 北京天安门      viewMode: '2D', // '2D' | '3D'    });
    // 2. 添加标记    const marker = new AMap.Marker({      position: [116.397428, 39.90923],      title: '北京天安门',    });    map.add(marker);
    // 3. 信息窗    const infoWindow = new AMap.InfoWindow({      content: '<​h4​>天安门<​/h4​><​p​>北京市中心<​/p​>',      offset: new AMap.Pixel(0, -30),    });    marker.on('click', () => {      infoWindow.open(map, marker.getPosition());    });  <​/script​><​/body​><​/html​>

核心 API

地图初始化

javascript
const map = new AMap.Map('container', {  zoom: 13,                         // 缩放级别 3-18  center: [lng, lat],               // 中心点 [经度, 纬度]  viewMode: '3D',                   // '2D' | '3D'  pitch: 45,                        // 3D 模式下俯仰角  mapStyle: 'amap://styles/normal', // 地图样式});

地图样式

javascript
map.setMapStyle('amap://styles/dark');      // 暗色map.setMapStyle('amap://styles/light');     // 浅色map.setMapStyle('amap://styles/fresh');     // 清新map.setMapStyle('amap://styles/grey');      // 灰色map.setMapStyle('amap://styles/whitesmoke'); // 远山黛

控件

javascript
// 缩放控件map.addControl(new AMap.Scale());map.addControl(new AMap.ToolBar({ position: 'RT' }));map.addControl(new AMap.ControlBar()); // 3D 旋转控件

标记 (Marker)

普通标记

javascript
const marker = new AMap.Marker({  position: [lng, lat],  title: '悬停提示',  label: { content: '标签文本', offset: new AMap.Pixel(0, -5) },});map.add(marker);

自定义图标

javascript
const marker = new AMap.Marker({  position: [lng, lat],  icon: new AMap.Icon({    size: new AMap.Size(40, 50),    image: 'https://example.com/icon.png',    imageSize: new AMap.Size(40, 50),  }),  offset: new AMap.Pixel(-20, -50),});

文本标记

javascript
const text = new AMap.Text({  text: '文字标注',  position: [lng, lat],  style: { 'background-color': '#fff', 'border': '1px solid #ccc', 'padding': '4px 8px', 'font-size': '12px' },});map.add(text);

圆形标记

javascript
const circleMarker = new AMap.CircleMarker({  center: [lng, lat],  radius: 15,  fillColor: '#4A90E2',  fillOpacity: 0.8,  strokeColor: '#fff',  strokeWeight: 2,});map.add(circleMarker);

覆盖物（折线、多边形、圆）

折线 (路线)

javascript
const polyline = new AMap.Polyline({  path: [[116.39, 39.91], [116.40, 39.92], [116.41, 39.91]],  strokeColor: '#4A90E2',  strokeWeight: 5,  strokeOpacity: 0.9,  lineJoin: 'round',});map.add(polyline);map.setFitView([polyline]); // 自动缩放到合适视角

多边形 (区域)

javascript
const polygon = new AMap.Polygon({  path: [[116.38, 39.92], [116.43, 39.92], [116.43, 39.89], [116.38, 39.89]],  fillColor: '#E74C3C',  fillOpacity: 0.3,  strokeColor: '#E74C3C',  strokeWeight: 2,});map.add(polygon);

圆

javascript
const circle = new AMap.Circle({  center: [116.397, 39.909],  radius: 1000, // 米  fillColor: '#4A90E2',  fillOpacity: 0.2,  strokeColor: '#4A90E2',  strokeWeight: 2,});map.add(circle);

常见场景示例

批量标记 + 点聚合

javascript
AMap.plugin('AMap.MarkerCluster', () => {  const points = [    { lnglat: [116.39, 39.91], weight: 1 },    { lnglat: [116.40, 39.92], weight: 2 },    // ... 更多点  ];  const cluster = new AMap.MarkerCluster(map, points, {    gridSize: 60,    minClusterSize: 2,  });});

热力图

javascript
AMap.plugin('AMap.HeatMap', () => {  const heatmap = new AMap.HeatMap(map, {    radius: 25,    opacity: [0, 0.8],  });  heatmap.setDataSet({    data: [      { lng: 116.39, lat: 39.91, count: 50 },      { lng: 116.40, lat: 39.92, count: 80 },      // ... 更多数据    ],    max: 100,  });});

行政区划着色

javascript
AMap.plugin('AMap.DistrictSearch', () => {  const district = new AMap.DistrictSearch({ extensions: 'all', level: 'district' });  district.search('海淀区', (status, result) => {    const bounds = result.districtList[0].boundaries;    bounds.forEach(bound => {      const polygon = new AMap.Polygon({        path: bound,        fillColor: '#4A90E2',        fillOpacity: 0.3,        strokeColor: '#2C3E50',        strokeWeight: 2,      });      map.add(polygon);    });    map.setFitView();  });});

驾车路线规划

javascript
AMap.plugin('AMap.Driving', () => {  const driving = new AMap.Driving({ map: map, panel: null });  driving.search(    new AMap.LngLat(116.379028, 39.865042), // 起点    new AMap.LngLat(116.427281, 39.903719), // 终点    (status, result) => {      if (status === 'complete') {        console.log('路线规划完成');      }    }  );});

轨迹动画

javascript
AMap.plugin('AMap.MoveAnimation', () => {  const path = [[116.39, 39.91], [116.40, 39.92], [116.41, 39.91], [116.42, 39.92]];  const marker = new AMap.Marker({    position: path[0],    icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',    offset: new AMap.Pixel(-13, -26),  });  map.add(marker);
  // 绘制轨迹线  const polyline = new AMap.Polyline({ path, strokeColor: '#4A90E2', strokeWeight: 6 });  map.add(polyline);  map.setFitView([polyline]);
  // 开始动画  marker.moveAlong(path, { duration: 500, autoRotation: true });});

地理编码 (地址 → 坐标)

javascript
AMap.plugin('AMap.Geocoder', () => {  const geocoder = new AMap.Geocoder();  geocoder.getLocation('北京市海淀区中关村', (status, result) => {    if (status === 'complete' && result.geocodes.length) {      const lnglat = result.geocodes[0].location;      map.setCenter([lnglat.lng, lnglat.lat]);    }  });});

插件加载

高德 JS API 2.0 使用按需加载模式：

javascript
AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.HeatMap'], () => {  // 插件加载完毕后执行  map.addControl(new AMap.Scale());});

常用插件列表：

插件名功能
AMap.Scale比例尺
AMap.ToolBar缩放工具条
AMap.ControlBar3D 控制
AMap.HeatMap热力图
AMap.MarkerCluster点聚合
AMap.DistrictSearch行政区查询
AMap.Driving驾车路线
AMap.Walking步行路线
AMap.Transfer公交路线
AMap.Geocoder地理编码/逆编码
AMap.AutoComplete输入提示
AMap.PlaceSearchPOI 搜索
AMap.MoveAnimation轨迹动画

注意事项

  1. Key 必须配置：无有效 Key 地图不会加载。Key 在高德开放平台申请，绑定域名（本地开发可绑 localhost）。
  2. 坐标顺序是 [经度, 纬度]：与 Leaflet 的 [纬度, 经度] 相反。高德统一使用 GCJ-02 坐标系。
  3. 容器必须有明确的宽高：#map 需要 CSS 设置具体高度。
  4. 插件按需加载：使用 AMap.plugin() 回调确保插件就绪后再调用。
  5. HTTPS：线上必须用 HTTPS 加载 API，否则浏览器会拦截混合内容。
  6. 安全密钥（可选）：2.0 版支持 securityJsCode 配合服务端代理，生产环境建议启用：
    html
    <​script​>  window._AMapSecurityConfig = { securityJsCode: 'YOUR_SECURITY_CODE' };<​/script​>
  7. 配额限制：免费 Key 每日 30 万次调用，超限需升级商用授权。
Ln 1, Col 1MarkdownSpaces: 2
No errors