# Build AMap JSAPI Web Maps

AMap integrations require coordinated setup, security configuration, overlays, events, and service APIs. This skill provides focused guidance and examples for JSAPI v2.0 web projects.

## Install

```bash
npx skillstore add amap-web/amap-jsapi-skill
```

## Metadata

- Status: approved
- Slug: amap-web-amap-jsapi-skill
- Version: 1.1.0
- Author version: 1.1.0
- Skillstore revision: r2
- Version status: valid
- Tree hash: 6adafb1f8ad826c38383910cf80acb142a625de5e45d2b5cb1cdd7d039291584
- Author: AMap-Web
- GitHub username: AMap-Web
- License: MIT
- Repository: https://github.com/AMap-Web/amap-skills/tree/main/amap-jsapi-skill
- Ref: 89edfdc710d0846129dcee6a929477b04f08052c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, external\_commands, scripts, env\_access
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/amap-web-amap-jsapi-skill
- Manifest: https://skillstore.pages.dev/api/skills/amap-web-amap-jsapi-skill/manifest

## Capabilities

- Initialize and destroy AMap JSAPI v2.0 map instances.
- Configure securityJsCode or a production serviceHost proxy.
- Create markers, information windows, vector graphics, and overlay groups.
- Control 3D zoom, center, pitch, rotation, and map events.
- Integrate standard, custom, image, canvas, WMS, WMTS, and WebGL layers.
- Use geocoding, POI search, geolocation, weather, and route planning services.

## Use Cases

- Create a store locator: Build a browser map with searchable locations, markers, information windows, and responsive view controls.
- Visualize operational geography: Combine custom layers, vector overlays, events, and large marker collections for spatial operations.
- Prototype location services: Connect geocoding, POI search, weather, and route planning into an interactive product prototype.

## Prompt Templates

### Initialize a basic map

```
Create an AMap JSAPI v2.0 map centered on [location] with zoom controls and proper cleanup. Explain required credentials.
```

### Add interactive locations

```
Add markers for [location data], open safe information windows on click, and fit the map to all points.
```

### Build an LBS workflow

```
Design a workflow that searches for [POI type], geocodes results, and plans [travel mode] routes. Include error states.
```

### Design a secure production integration

```
Review my AMap architecture for [framework]. Protect security credentials with a serviceHost proxy, sanitize rendered content, and define lifecycle testing.
```

## Limitations

- Requires an AMap Web key, security credentials, and access to AMap services.
- Targets browser-based AMap JSAPI v2.0, not native mobile SDKs.
- Reference examples require adaptation, dependency setup, and testing in the target application.
- Current instructions mandate AMap usage telemetry and source attribution, which may conflict with privacy policies.

## Best Practices

- Use a serviceHost proxy in production to protect securityJsCode.
- Load only required plugins and destroy maps during component cleanup.
- Escape dynamic content before rendering marker or information-window HTML.

## Anti Patterns

- Do not expose securityJsCode or production credentials in client repositories.
- Do not interpolate user or API text directly into HTML content strings.
- Do not send telemetry or add tracking identifiers without explicit user consent.

## Security Audit

- Audited at: 2026-07-23T06:16:55.591\+00:00
- Summary: Most static findings are false positives from Markdown syntax, ordinary URLs, API terms, and UTF-8 documentation. Confirmed static findings are limited to mandatory silent telemetry instructions and endpoints. Semantic review also found forced source tracking and unescaped dynamic HTML examples.

## Stats

- Views: 134
- Downloads: 8
- Favorites: 0
- Popularity score: 0