集成

高德地图JSAPI免费版

试用

高德地图JSAPI v2.0开发助手,支持地图展示、标注点、地理编码与基础路径规划,适合个人开发者快速集成地图功能。Use when 需要API集成、接口对接、Webhook配置、系统连接时使用。不适用于逆向工程闭源API。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。

它能做什么

高德地图JSAPI v2.0开发助手,支持地图展示、标注点、地理编码与基础路径规划,适合个人开发者快速集成地图功能。Use when 需要API集成、接口对接、Webhook配置、系统连接时使用。不适用于逆向工程闭源API。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。

技能文档

核心功能: 本技能提供中文交互、化工作流场景等能力。

高德地图JSAPI v2.0 开发助手免费版

概述

本工具为个人开发者提供高德地图JSAPI v2.0(WebGL)开发指导能力,涵盖地图展示、标注点管理、地理编码与基础路径规划等核心功能。免费版适合个人项目快速集成地图功能,提供每日5000次API调用额度,满足日常开发需求。

免费版与专业版对比

能力维度免费版专业版
API调用额度5000次/天无限制
地图渲染WebGL基础WebGL高级+矢量图层
路径规划步行+驾车步行+驾车+公交+货车
实时数据不支持实时路况+交通事件
批量地理编码不支持批量处理
定制化基础样式自定义地图样式
技术支持社区专属支持

核心能力

1. WebGL地图渲染

<!DOCTYPE html>


    
    
    高德地图示例

输出: 返回WebGL地图渲染的执行结果,包含操作状态和输出数据。

  • 执行此能力时使用input_params参数,支持创建/查询/导出操作

2. 标注点(Marker)管理

// 添加标注点
function addMarker(map, position, title) {
    const marker = new AMap.Marker({
        position: position,        // [经度, 纬度]
        title: title,              // 鼠标悬停标题
        offset: new AMap.Pixel(-13, -30)  // 偏移量
    });
    map.add(marker);
    return marker;
}

// 添加信息窗口
function addInfoWindow(map, position, content) {
    const infoWindow = new AMap.InfoWindow({
        content: content,
    });
    infoWindow.open(map, position);
}

// 使用示例
const marker = addMarker(map, [116.397428, 39.90923], '天安门');
addInfoWindow(map, [116.397428, 39.90923],
    '天安门广场北京市中心');

// 批量添加标注点
const locations = [
    { pos: [116.397428, 39.90923], name: '天安门' },
    { pos: [116.413384, 39.911023], name: '王府井' },
    { pos: [116.377849, 39.915378], name: '西单' }
];
locations.forEach(loc => addMarker(map, loc.pos, loc.name));

输出: 返回标注点(Marker)管理的执行结果,包含操作状态和输出数据。

  • 执行此能力时使用input_params参数,支持创建/查询/导出操作

3. 地理编码与逆地理编码

// 地理编码: 地址 -> 坐标
function geocode(address) {
    const geocoder = new AMap.Geocoder({
        city: '全国'  // 限制搜索范围
    });

    geocoder.getLocation(address, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            const location = result.geocodes[0].location;
            console.log(`${address} -> 经度: ${location.lng}, 纬度: ${location.lat}`);
            // 在地图上标记
            addMarker(map, [location.lng, location.lat], address);
            map.setCenter([location.lng, location.lat]);
        } else {
            console.log('地理编码失败:', result);
        }
    });
}

// 逆地理编码: 坐标 -> 地址
function reverseGeocode(lng, lat) {
    const lnglat = [lng, lat];

    geocoder.getAddress(lnglat, function(status, result) {
            const address = result.regeocode.formattedAddress;
            console.log(`(${lng}, ${lat}) -> ${address}`);
        }
    });
}

// 使用示例
geocode('北京市朝阳区望京SOHO');
reverseGeocode(116.397428, 39.90923);

输出: 返回地理编码与逆地理编码的执行结果,包含操作状态和输出数据。

  • 执行此能力时使用input_params参数,支持创建/查询/导出操作

4. 基础路径规划

// 驾车路径规划
function drivingRoute(origin, destination) {
    AMap.plugin('AMap.Driving', function() {
        const driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME,  // 最快捷
            map: map,
            panel: 'routePanel'  // 路线结果面板ID(可选)
        });

        driving.search(origin, destination, function(status, result) {
            if (status === 'complete') {
                console.log('规划成功:');
                result.routes[0].steps.forEach((step, i) => {
log(`  ${i+1}. ${step.instructions}`);
                });
log(`总距离: ${(result.routes[0].distance / 1000).toFixed(1)}公里`);
log(`预计时间: ${Math.ceil(result.routes[0].time / 60)}分钟`);
            } else {
log('规划失败:', result);
            }
        });
    });
}

// 步行路径规划
function walkingRoute(origin, destination) {
    AMap.plugin('AMap.Walking', function() {
        const walking = new AMap.Walking({ map: map });
        walking.search(origin, destination, function(status, result) {
            if (status === 'complete') {
log(`步行距离: ${result.routes[0].distance}米`);
log(`预计时间: ${Math.ceil(result.routes[0].time / 60)}分钟`);
            }
        });
    });
}

// 使用示例
drivingRoute([116.377849, 39.915378], [116.413384, 39.911023]);  // 西单 -> 王府井
walkingRoute([116.397428, 39.90923], [116.413384, 39.911023]);    // 天安门 -> 王府井

输出: 返回基础路径规划的执行结果,包含操作状态和输出数据。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：JSAPI、开发助手、支持地图展示、地理编码与基础路、适合个人开发者快、速集成地图功能、开发助手免费版、为个人开发者提供、地图开发核心能力、核心能力、标注点管理、适用场景、个人项目地图展示、位置搜索、基础导航功能开发、差异化、免费版聚焦核心地、图功能、速上手、调用额度、适用关键词、地图开发、geocoding等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

  • 执行此能力时使用input_params参数,支持创建/查询/导出操作

使用场景

场景一:店铺位置展示页面

<!DOCTYPE html>


    
    店铺位置
    


    我们的店铺位置
    
    

amap.com/maps?v=2.0&key=你的API_KEY">

场景二:多个地点标注展示

// 在地图上展示多个分支机构
const branches = [
    { name: '北京总部', address: '北京市朝阳区望京SOHO', pos: [116.481028, 39.996729] },
    { name: '上海分部', address: '上海市浦东新区陆家嘴', pos: [121.473701, 31.230416] },
    { name: '深圳分部', address: '深圳市南山区科技园', pos: [113.946582, 22.538314] },
    { name: '广州分部', address: '广州市天河区珠江新城', pos: [113.321036, 23.119318] }
];

// 自动调整视野以包含所有标注
const markers = branches.map(b => new AMap.Marker({
    position: b.pos,
    title: b.name
}));
map.add(markers);
map.setFitView();  // 自动缩放以显示所有标注

// 点击标注显示信息
markers.forEach((marker, i) => {
    marker.on('click', function() {
        new AMap.InfoWindow({
            content: `
                ${branches[i].name}
                ${branches[i].address}
            `,
        }).open(map, branches[i].pos);
    });
});

场景三:地址搜索与定位


    
    搜索

不适用场景

以下场景高德地图JSAPI免费版不适合处理：

  • 逆向工程闭源API
  • API安全渗透测试
  • 非标准协议集成

触发条件

需要API集成、接口对接、Webhook配置、系统连接时使用。不适用于非本工具能力范围的需求。

快速开始

领先步:申请API Key

  1. 访问高德开放平台
  2. 创建应用,获取API Key和安全密钥
  3. 配置域名白名单

第二步:引入JSAPI


amap.com/maps?v=2.0&key=你的API_KEY">

第三步:初始化地图

    zoom: 12,
    center: [116.397428, 39.90923]
});

结果处理: 执行完成后,查看输出结果确认操作状态。成功时输出包含处理摘要和结果数据;失败时根据错误信息排查问题,查阅错误处理章节获取恢复步骤。

示例

地图样式选项

样式名称样式代码适用场景
标准样式amap://styles/normal通用场景
幻影黑amap://styles/dark夜间模式
月光银amap://styles/light简洁风格
远山黛amap://styles/whitesmoke商务风格
草色青amap://styles/fresh自然风格

常用控件配置

// 添加工具条和比例尺
AMap.plugin([
    'AMap.ToolBar',
    'AMap.Scale',
    'AMap.OverView'
], function() {
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.Scale());
    map.addControl(new AMap.OverView({ isOpen: true }));
});

免费版API额度

接口免费额度说明
JSAPI加载无限制地图渲染不消耗配额
地理编码5000次/天地址转坐标
逆地理编码5000次/天坐标转地址
驾车路径规划5000次/天驾车导航
步行路径规划5000次/天步行导航

优选实践

  1. 安全密钥配置:生产环境必须配置securityJsCode,避免Key泄露。
  2. 按需加载插件:使用AMap.plugin按需加载,减少初始加载时间。
  3. 标注优化:大量标注时使用MassMarks或MarkerCluster提升性能。
  4. 错误处理:所有异步回调中处理失败情况,提升用户体验。
  5. 移动端适配:设置viewport meta标签,使用自适应布局。
// 优选实践:安全初始化模板
function initMap(containerId, options = {}) {
    if (!window.AMap) {
        console.error('高德地图JSAPI未加载');
        return null;
    }

    const defaultOptions = {
        zoom: 12,
        viewMode: '2D'
    };

Map(containerId, { ...defaultOptions, ...options });

    // 添加基础控件
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
        map.addControl(new AMap.ToolBar({ position: 'RB' }));
        map.addControl(new AMap.Scale());
    });

    return map;
}

常见问题

Q1: 免费版API额度够用吗?

个人项目每日5000次调用通常足够。如果需要更高额度,可升级专业版获取无限制调用。

Q2: 如何防止API Key被滥用?

配置域名白名单,只允许指定域名使用Key。生产环境使用securityJsCode增强安全性。

Q3: 地图加载慢怎么办?

使用按需加载插件(AMap.plugin),避免一次性加载所有功能。检查网络连接是否正常。

Q4: 支持哪些浏览器?

支持现代浏览器(Chrome 70+, Firefox 65+, Safari 12+, Edge 79+)。WebGL渲染需要GPU支持。

Q5: 免费版支持3D地图吗?

免费版支持3D视图模式(viewMode: '3D'),但高级3D效果(如建筑白模)需要专业版。

依赖说明

运行环境

  • Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
  • 浏览器: Chrome 70+ / Firefox 65+ / Safari 12+ / Edge 79+
  • 网络: 需可访问 https://webapi.amap.com

依赖详情

依赖项类型是否必需获取方式
AMap JSAPIJavaScript库必需高德开放平台申请Key
浏览器运行环境必需现代浏览器
HTTPS网络协议必需生产环境必须使用HTTPS
LLM APIAPI必需由Agent内置LLM提供

API Key 配置

  • 在高德开放平台申请API Key和安全密钥
  • 通过 window._AMapSecurityConfig 配置安全密钥
  • 在JSAPI script标签的key参数中传入API Key

可用性分类

  • 分类: MD+execute(纯Markdown指令,需要exec能力生成HTML文件)
  • 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent生成高德地图JSAPI开发代码
  • API Key通过环境变量配置: export API_KEY=your_key

错误处理

错误场景原因处理方式
配置错误参数缺失或格式错误检查依赖说明中的配置要求
运行时错误运行环境不满足确认运行环境符合依赖说明
网络错误连接超时或不可达执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

已知限制

  • 需要API Key，无Key环境无法使用

安全注意事项

风险类型防范措施
API密钥泄露通过环境变量配置，禁止硬编码到代码或配置文件中
命令执行风险仅执行白名单命令，避免拼接用户输入到命令行参数中
网络通信安全使用HTTPS协议，验证SSL证书有效性
敏感数据暴露输出结果中不包含密钥、令牌等敏感信息

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。

效率量化分析

操作场景手动耗时自动化耗时效率提升
文件解析与提取5-10分钟/个<5秒/个60-120x
批量文件处理(100个)8-16小时<5分钟96-192x
API调用与响应解析2-3分钟/次<1秒/次120-180x
多接口数据聚合15-30分钟<10秒90-180x
命令执行与结果收集3-5分钟/次<2秒/次90-150x
重复任务批量执行因任务而异线性缩减5-50x
错误排查与修复10-30分钟<30秒20-60x

差异化对比

对比维度本技能传统手动方式通用脚本工具
自动化程度全流程自动完全手动部分自动
错误处理内置错误恢复依赖人工经验基本try-catch
可复用性参数化配置一次性脚本模板化
安全合规内置安全检查无安全保障无安全保障
适用场景核心功能通用场景通用场景

核心功能

  • 自动化执行: 基于指令驱动的自动化流程
  • 文件处理: 支持多种文件格式的读取、解析和写入操作
  • API集成: 通过标准化接口调用外部服务并处理响应
  • 命令执行: 在安全沙箱中执行系统命令并收集结果
  • 信息检索: 快速搜索和过滤目标数据

相关技能

高德地图全能版

免申请Key即用，17项地图能力全覆盖：地理编码、POI搜索、周边搜索、驾车/公交/步行/骑行路线规划、天气查询、IP定位，出行必备地图工具。暑期自驾路线规划。

13 次安装

Gaode

高德地图 Web API 工具与开发指南。Use for: (1) 用附带的零依赖 CLI 直接查地理编码/POI/路线/天气/IP定位, (2) 中国坐标系(WGS-84/GCJ-02/BD-09)转换与避坑, (3) 高德全套 Web Service API 开发指导。Amap (Gaode) Web API...

29 次安装

腾讯地图WebserviceAPI开发技能

腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。

tencentmap-jsapi-gl-skill

腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。

16 次安装

高德 AI 路书

当用户想把自然语言旅行想法生成高德/Amap 路书，或生成可公网访问的 HTML/Excel/JSON 路书产物时使用。本 skill 会先反问缺失信息，再进行地点解析、POI 搜索、路线规划、每日时间线、天气提醒、假设说明，并默认发布到公网静态目录以便访问和下载。需要用户配置高德 Web Service API...

4 次安装1 星标

tencentmap-miniprogram-skill

腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。