What problem does it solve?
This Skill provides concise, developer-focused guidance to securely integrate and use AMap JSAPI v2.0 (WebGL) in web applications, removing common pitfalls like incorrect loader usage, missing security configuration, WebGL memory leaks, and inefficient plugin loading. It helps teams avoid map white-screens, authentication errors, and performance regressions when building interactive 2D/3D mapping features.
Core Features & Use Cases
- Initialization and loader usage: asynchronous AMapLoader integration and recommended loader parameters for version 2.0.
- Mandatory security setup: how to configure window._AMapSecurityConfig, recommended proxy/ serviceHost patterns for production, and server-side proxy examples.
- View & lifecycle management: 3D view controls (zoom, pitch, rotation), map creation and destroy patterns to avoid WebGL memory leaks.
- Overlays & vector graphics: Markers, LabelMarker, Polylines, Polygons, Circles and editors for drawing and editing geometries.
- Layer management & custom rendering: using official tile layers, LabelsLayer, CanvasLayer, ImageLayer and GLCustomLayer (Three.js integration) for custom 3D scenes.
- LBS services & routing: Geocoder, PlaceSearch, Driving/Walking/Riding/Transfer examples and how to render route results.
- Best practices: security-first deployment, per-plugin on-demand loading, resource release (map.destroy()), and performance tips for large datasets.
Quick Start
Before calling the loader, set window._AMapSecurityConfig with your securityJsCode, then call AMapLoader.load with your Web Key, version '2.0', and required plugins to initialize a 3D map.
