Menú
高德地图 JSAPI v2.0 (WebGL) 开发技能。涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | amap-jsapi |
| description | 高德地图 JSAPI v2.0 (WebGL) 开发技能。涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。 |
| license | MIT |
| version | 1.0.0 |
本指南包含地图初始化、覆盖物、事件、图层等核心模块的 API 说明和代码示例，旨在帮助开发者快速集成高德地图并遵循正确的使用方式。
使用 script 标签加载 loader.js：
<script src="https://webapi.amap.com/loader.js"></script>
重要：自 v2.0 起，必须在加载地图前配置安全密钥，否则无法通过鉴权。详情及后端代理示例请参考 安全策略。
// 在调用 AMapLoader.load 前执行
window._AMapSecurityConfig = {
securityJsCode: '您的安全密钥', // 开发环境：明文设置
// serviceHost: 'https://your-proxy-domain/_AMapService', // 生产环境：建议使用代理转发
};
import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
key: '您的Web端开发者Key', // 必填
version: '2.0', // 指定版本
plugins: ['AMap.Scale', 'AMap.ToolBar'] // 预加载插件
}).then((AMap) => {
const map = new AMap.Map('container', {
viewMode: '3D', // 开启3D视图
zoom: 11, // 初始缩放级别
center: [116.39, 39.90] // 初始中心点
});
map.addControl(new AMap.Scale());
}).catch(e => console.error(e));
references/map-init.md - 掌握 load、Map 实例创建及 destroy 销毁流程。references/view-control.md - 控制 zoom (缩放)、center (平移)、pitch (俯仰)、rotation (旋转)。references/marker.md - 使用 Marker (基础)、LabelMarker (海量避让) 标注位置。references/vector-graphics.md - 绘制 Polyline (轨迹、线)、Polygon (区域、面)、Circle (范围、圆)。references/info-window.md - 通过 InfoWindow 展示详细信息。references/context-menu.md - 自定义地图或覆盖物的右键交互。references/layers.md - 标准、卫星、路网及 3D 楼块图层。references/custom-layers.md - 集成 Canvas、WMS/WMTS, GLCustomLayer 地图上叠加 Canvas、WMS图层、 Threejs图层。references/geocoder.md - 地理编码/逆地理编码（地址/坐标互转）。references/routing.md - 路径规划（驾车/步行/公交）。references/search.md - POI 搜索与输入提示。references/events.md - 响应点击、拖拽、缩放等交互事件。serviceHost，避免 securityJsCode 泄露。plugins 中声明需要的插件，减少首屏资源体积。map.destroy()，防止 WebGL 上下文内存泄漏。JSAPI 文档分为以下几个类别：
LngLat / Bounds / Pixel / Size
InfoWindow
Event
Map / MapsEvent
TileLayer / Traffic / Satellite / RoadNet / Buildings / DistrictLayer / IndoorMap
WMS / WMTS / MapboxVectorTileLayer
HeatMap / VectorLayer / LabelsLayer / CustomLayer / Flexible / ImageLayer / CanvasLayer / GLCustomLayer
Marker / Text / Icon / LabelMarker / ElasticMarker / MarkerCluster / MassMarks / MoveAnimation / AnimationCallback / EasingCallback
ContextMenu
Polygon / Polyline / BezierCurve / Circle / CircleMarker / Ellipse / Rectangle / GeoJSON
LayerGroup / OverlayGroup
Control / Scale / ToolBar / ControlBar / MapType / HawkEye
RangingTool / MouseTool / PolygonEditor / PolylineEditor / CircleEditor / BezierCurveEditor / EllipseEditor / RectangleEditor
WebService / WebServiceCallback
AutoComplete / AutoCompleteSearchCallback / PlaceSearch / searchCallback / CloudDataSearch / CloudDataSearchCallback
Geocoder / GeocoderCallback / ReGeocoderCallback / convertFrom
Driving / DrivingCallback / DrivingResult / DriveStepBasic / DriveStepDetail / TruckDriving / Walking / WalkingCallback / WalkingResult / Transfer / TransferCallback / TransferResult / Riding / RidingCallback / RidingResult / DragRoute / DragRouteTruck / GraspRoad / GraspRoadCallback
DistrictSearch / Weather / WeatherLiveResult / WeatherForecastResult / StationSearch / LineSearch
Geolocation / GeolocationCallBack / GeolocationResult / CitySearch
GeometryUtil / DomUtil / Browser / Util