### Create a GLCustomLayer

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/layers-custom.md

Initialize a GLCustomLayer with custom rendering logic. The init function is for setup, and the render function is called for each frame. Ensure gl context is handled correctly.

```javascript
var glCustomLayer = new GLCustomLayer({
    init: function(gl){
        // init shader or sth...
    },
    render: function(gl, state){
        // render every frame
    },
});
```

--------------------------------

### Full Driving Route Planning Example

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/routing.md

Demonstrates a complete driving route planning function that clears previous routes, searches for a new route, extracts path points, draws a polyline on the map, displays route information, and adjusts the map view. Includes helper functions for route info and time formatting.

```javascript
const map = new AMap.Map('container', {
  zoom: 12,
  center: [116.397, 39.909]
});

const driving = new AMap.Driving({
  policy: AMap.DrivingPolicy.LEAST_TIME,
  showTraffic: true
});

function planDriving(start, end) {
  // 清除之前的路线
  driving.clear();
  
  driving.search(start, end, function(status, result) {
    if (status === 'complete') {
      const route = result.routes[0];
      
      // 提取路径点
      const path = [];
      route.steps.forEach(step => {
        path.push(...step.path);
      });
      
      // 绘制路线
      const polyline = new AMap.Polyline({
        path: path,
        strokeColor: '#1890ff',
        strokeWeight: 6,
        strokeOpacity: 0.9,
        lineJoin: 'round',
        lineCap: 'round'
      });
      map.add(polyline);
      
      // 显示信息
      showRouteInfo(route);
      
      // 调整视野
      map.setFitView();
    } else {
      alert('驾车规划失败：' + result);
    }
  });
}

function showRouteInfo(route) {
  const distance = (route.distance / 1000).toFixed(1) + ' 公里';
  const time = formatTime(route.time);
  const tolls = route.tolls ? route.tolls + ' 元' : '无';
  
  console.log(`距离: ${distance}, 时间: ${time}, 过路费: ${tolls}`);
}

function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.round((seconds % 3600) / 60);
  if (hours > 0) {
    return `${hours} 小时 ${minutes} 分钟`;
  }
  return `${minutes} 分钟`;
}

// 使用
planDriving([116.379028, 39.865042], [116.427281, 39.903719]);
```

--------------------------------

### Initialize and Use AMap.Geocoder

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/geocoder.md

Loads the AMap.Geocoder plugin and demonstrates how to perform reverse geocoding by getting an address from coordinates. Ensure the AMap.Geocoder plugin is loaded before instantiation.

```javascript
var geocoder;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
   geocoder = new AMap.Geocoder({
       radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
       extensions: "all" //返回地址描述以及附近兴趣点和道路信息，默认“base”
   });
   //返回地理编码结果
   geocoder.on("complete", geocoder_CallBack);
   //逆地理编码
   geocoder.getAddress(new AMap.LngLat(116.359119, 39.972121));
});
```

--------------------------------

### search

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/routing.md

Starts the route navigation calculation based on provided waypoints.

```APIDOC
## search(locations)

### Description
Starts path navigation. Supports dragging route nodes to recalculate the path.

### Parameters
- **locations** (Array<{lnglat: LngLatLike}>) - Required - Array of waypoints including start, intermediate, and end points.
```

--------------------------------

### Control LabelMarker Animation

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Methods to start, stop, pause, and resume LabelMarker animations.

```javascript
animationLabel.startMove();
```

```javascript
animationLabel.stopMove();
```

```javascript
animationLabel.pauseMove();
```

```javascript
animationLabel.resumeMove();
```

--------------------------------

### LabelMarker Methods

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Provides details on various methods available for LabelMarker instances to get and set properties such as name, position, visibility, icon, and text.

```APIDOC
## LabelMarker Methods

### `getName()`

#### Description
Gets the name of the label marker, used as an identifier and not the displayed text.

#### Returns
- `(string | undefined)`: The name of the label marker, or undefined if not set.

### `setName(name)`

#### Description
Sets the name of the label marker, used as an identifier.

#### Parameters
- `name` **(string)**: The name to set for the label marker.

### `getPosition()`

#### Description
Gets the geographical position of the label marker.

#### Returns
- `LngLat`: The position of the label marker.

### `setPosition(position)`

#### Description
Sets the geographical position of the label marker.

#### Parameters
- `position` **(LngLat | [number] | string)**: The new position for the label marker.

### `getZooms()`

#### Description
Gets the zoom level range for the label marker's visibility.

#### Returns
- `(Vector2 | undefined)`: The zoom level range, or undefined if not set.

### `setZooms(zooms)`

#### Description
Sets the zoom level range for the label marker's visibility.

#### Parameters
- `zooms` **[number]**: The zoom level range to set.

### `getOpacity()`

#### Description
Gets the opacity of the label marker.

#### Returns
- `(number | undefined)`: The opacity value, or undefined if not set.

### `setOpacity(opacity)`

#### Description
Sets the opacity of the label marker.

#### Parameters
- `opacity` **number**: The opacity value to set (0 to 1).

### `setRotation(angle)`

#### Description
Sets the rotation angle of the label marker.

#### Parameters
- `angle` **number**: The rotation angle in degrees.

### `getRotation()`

#### Description
Gets the rotation angle of the label marker.

#### Returns
- `(number | 0)`: The rotation angle, defaults to 0.

### `getzIndex()`

#### Description
Gets the stacking order (z-index) of the label marker.

#### Returns
- `(number | undefined)`: The z-index value, or undefined if not set.

### `setzIndex(zIndex)`

#### Description
Sets the stacking order (z-index) of the label marker.

#### Parameters
- `zIndex` **number**: The z-index value to set.

### `getRank()`

#### Description
Gets the priority of the label marker for collision avoidance.

#### Returns
- `(number | undefined)`: The rank value, or undefined if not set.

### `setRank(rank)`

#### Description
Sets the priority of the label marker for collision avoidance. Higher values have higher priority.

#### Parameters
- `rank` **number**: The rank value to set.

### `getText()`

#### Description
Gets the text configuration options for the label marker.

#### Returns
- `(LabelMarkerTextOptions | undefined)`: The text options, or undefined if not set.

### `setText(textOpts)`

#### Description
Sets the text configuration options for the label marker, including content and style.

#### Parameters
- `textOpts` **LabelMarkerTextOptions**: An object containing text options.

### `getIcon()`

#### Description
Gets the icon configuration options for the label marker.

#### Returns
- `(LabelMarkerIconOptions | undefined)`: The icon options, or undefined if not set.

### `setIcon(iconOpts)`

#### Description
Sets the icon configuration options for the label marker.

#### Parameters
- `iconOpts` **LabelMarkerIconOptions**: An object containing icon options.

### `getOptions()`

#### Description
Gets all the current configuration options for the label marker.

#### Returns
- `LabelMarkerOptions`: An object containing all label marker options.

### `getExtData()`

#### Description
Gets the user-defined custom data associated with the label marker.

#### Returns
- `(any | undefined)`: The custom data, or undefined if not set.

### `setExtData(extData)`

#### Description
Sets user-defined custom data for the label marker.

#### Parameters
- `extData`: The custom data to associate with the marker.

### `setTop(isTop)`

#### Description
Sets whether the label marker should be displayed on top of all other markers.

#### Parameters
- `isTop` **boolean**: `true` to set the marker on top, `false` otherwise.

### `setVisible(visible)`

#### Description
Sets the visibility of the label marker.

#### Parameters
- `visible` **boolean**: `true` to make the marker visible, `false` to hide it.
```

--------------------------------

### Control Marker Animation

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Methods to start, stop, pause, and resume marker animations.

```javascript
animationMarker.startMove();
```

```javascript
animationMarker.stopMove();
```

```javascript
animationMarker.pauseMove();
```

```javascript
animationMarker.resumeMove();
```

--------------------------------

### Initialize and Search Walking Navigation

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/routing.md

Demonstrates loading the Walking plugin, constructing the instance, and performing a search between two coordinates.

```javascript
var mwalk;
  mapObj.plugin(["AMap.Walking"], function() { //加载步行导航插件
   mwalk = new AMap.Walking (); //构造步行导航类
   AMap.event.addListener(mwalk, "complete", walking_CallBack); //返回导航查询结果
   //根据起、终点坐标规划步行路线
   mwalk.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
 });
```

```javascript
var mwalk;
  mapObj.plugin(["AMap.Walking"], function() { //加载步行导航插件
   mwalk = new AMap.Walking (); //构造步行导航类
   AMap.Event.addListener(mwalk, "complete", walking_CallBack); //返回导航查询结果
   //根据起、终点坐标规划步行路线
   mwalk.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
 });
```

--------------------------------

### LabelMarker Initialization and Usage

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Demonstrates how to create a LabelMarker instance, configure its properties like position, icon, and text, and add it to a LabelsLayer on the map.

```APIDOC
## LabelMarker Initialization and Usage

### Description
This example shows how to create and configure a `AMap.LabelMarker` instance with custom icon and text styles, and then add it to a `LabelsLayer` which is subsequently added to the map.

### Method
```javascript
new AMap.LabelMarker(opts)
```

### Endpoint
N/A (Client-side API)

### Parameters
#### Request Body (opts)
- **position** (Vector2 | LngLat) - Required - The geographical coordinates for the marker.
- **zooms** (Vector2) - Optional - The zoom level range for the marker's visibility.
- **opacity** (number) - Optional - The transparency of the marker, defaults to 1.
- **rank** (number) - Optional - The priority for label collision, higher values mean higher priority, defaults to 1.
- **zIndex** (number) - Optional - The stacking order of the marker within the same LabelsLayer, defaults to 1.
- **visible** (boolean) - Optional - Whether the marker is visible, defaults to true.
- **extData** (any) - Optional - User-defined data associated with the marker.
- **icon** (IconOptions) - Optional - Configuration for the marker's icon.
    - **image** (string) - Required - The URL of the icon image.
    - **size** (Vector2 | Size) - Optional - The size of the icon, defaults to [36, 36].
    - **clipOrigin** (Vector2 | Pixel) - Optional - The origin point for clipping the icon image, defaults to [0, 0].
    - **clipSize** (Vector2 | Size) - Optional - The size of the clipped icon image; if not set, the image size is used.
    - **anchor** (Vector2 | Pixel | string) - Optional - The anchor point of the icon relative to the marker's position. Defaults to 'top-left'.
- **text** (TextOptions) - Optional - Configuration for the marker's text label.
    - **content** (string) - Required - The text content to display.
    - **direction** (string) - Optional - The direction of the text relative to the icon or position. Defaults to 'right'.
    - **offset** (Pixel | Vector2) - Optional - An offset applied to the text position based on its direction, defaults to [0, 0].
    - **zooms** (Vector2) - Optional - The zoom level range for the text's visibility.
    - **style** (TextStyleOptions) - Optional - Styling options for the text.
        - **fontSize** (number) - Optional - The font size, defaults to 12.
        - **fillColor** (string) - Optional - The color of the text.
        - **strokeColor** (string) - Optional - The color of the text's outline.
        - **padding** (string | Array<(string | number)>) - Optional - Padding around the text, defaults to [3, 3, 3, 3].
        - **backgroundColor** (string) - Optional - The background color of the text.
        - **borderColor** (string) - Optional - The border color of the text background.
        - **borderWidth** (number) - Optional - The width of the text background border.
        - **fold** (boolean) - Optional - Whether the text should wrap (folds every 6 characters).

### Request Example
```javascript
// Create a LabelMarker instance
var labelMarker = new AMap.LabelMarker({
    position: [116.468599, 39.995847],
    opacity: 1,
    zIndex: 2,
    icon: {
        image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
        anchor: 'bottom-center',
        size: [25, 34],
        clipOrigin: [459, 92],
        clipSize: [50, 68]
    },
    text: {
        content: '香猪坊',
        direction: 'right',
        style: {
            fontSize: 15,
            fillColor: '#fff',
            strokeColor: 'rgba(255,0,0,0.5)',
            strokeWidth: 2,
            padding: [3, 10],
            backgroundColor: 'yellow',
            borderColor: '#ccc',
            borderWidth: 3,
        }
    }
});

// Create a LabelsLayer instance to hold LabelMarkers
var labelsLayer = new LabelsLayer({
    collision: true,
});

// Add the LabelMarker instance to the LabelsLayer
labelsLayer.add(labelMarker);

// Add the LabelsLayer to the map
map.add(labelsLayer);
```

### Response
N/A (Client-side API configuration)
```

--------------------------------

### Create and Add a LabelMarker

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Demonstrates initializing a LabelMarker with icon and text configurations, adding it to a LabelsLayer, and displaying it on the map.

```javascript
// 创建一个 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
    position: [116.468599, 39.995847],
    opacity: 1,
    zIndex: 2,
    icon: {
        image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
        anchor: 'bottom-center',
        size: [25, 34],
        clipOrigin: [459, 92],
        clipSize: [50, 68]
    },
    text: {
        content: '香猪坊',
        direction: 'right',
        style: {
            fontSize: 15,
            fillColor: '#fff',
            strokeColor: 'rgba(255,0,0,0.5)',
            strokeWidth: 2,
            padding: [3, 10],
            backgroundColor: 'yellow',
            borderColor: '#ccc',
            borderWidth: 3,
        }
    }
});
// 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
var labelsLayer = new LabelsLayer({
    collision: true,
});
// 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
map.add(labelsLayer);
```

--------------------------------

### Create Skills Directory

Source: https://github.com/amap-web/amap-skills/blob/main/README.md

Initialize the required directory structure for custom skills in your project root.

```bash
mkdir -p .cursor/skills
```

--------------------------------

### Link or Copy Skill Files

Source: https://github.com/amap-web/amap-skills/blob/main/README.md

Configure the skill files in your project using symbolic links or direct copying.

```bash
# macOS / Linux
ln -s /path/to/amap-skills/amap-jsapi-skill .cursor/skills/amap-jsapi-skill

# Windows (Run CMD as Administrator)
mklink /D .cursor\skills\amap-jsapi-skill C:\path\to\amap-skills\amap-jsapi-skill
```

```bash
cp -r /path/to/amap-skills/amap-jsapi-skill .cursor/skills/
```

--------------------------------

### Marker Initialization

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

How to create and add a marker to the map.

```APIDOC
## Marker Initialization

### Description
Creates a new point marker on the map.

### Parameters
#### Request Body
- **opts** (MarkerOptions) - Required - Marker configuration object
  - **map** (Map) - Optional - Map object to display the marker
  - **position** (Vector2 | LngLat) - Optional - Marker position
  - **icon** (Icon | string) - Optional - Icon URL or object
  - **content** (string | HTMLElement) - Optional - HTML content for marker
  - **title** (string) - Optional - Hover tooltip text
  - **visible** (boolean) - Optional - Visibility (default: true)
  - **zIndex** (number) - Optional - Stacking order (default: 12)
  - **draggable** (boolean) - Optional - Whether draggable (default: false)

### Request Example
```javascript
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.397428, 39.90923),
    icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    anchor: 'bottom-center',
});
map.add(marker);
```
```

--------------------------------

### DistrictLayer Options API

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/layers-official.md

API endpoints for managing DistrictLayer options, including setting and getting various properties like SOC, districts, styles, zIndex, opacity, and zooms.

```APIDOC
## POST /amap-skills/DistrictLayer

### Description
Initializes a DistrictLayer with specified options.

### Method
POST

### Endpoint
/amap-skills/DistrictLayer

### Parameters
#### Request Body
- **opts** (DistrictLayerOptions) - Required - 图层初始化参数
    - **opts.adcode** (String) - Required - 行政区的编码
    - **opts.SOC** (String) - Optional - 设定显示的国家 (default: 'CHN')
    - **opts.depth** (Number) - Optional - 设定数据的层级深度 (default: 0)
    - **opts.zIndex** (Number) - Optional - 图层的层级 (default: 80)
    - **opts.opacity** (Number) - Optional - 图层透明度 (default: 1)
    - **opts.visible** (Boolean) - Optional - 图层是否可见 (default: true)
    - **opts.zooms** (Array<number>) - Optional - 图层缩放等级范围 (default: [2, 20])
    - **opts.styles** (DistrictLayerStyle) - Optional - 为简易行政区图设定各面的填充颜色和描边颜色
        - **opts.styles.stroke-width** (Number | Function) - Optional - 描边线宽 (default: 1)
        - **opts.styles.zIndex** (Number | Function) - Optional - 图层中每个区域层级 (default: 0)
        - **opts.styles.coastline-stroke** (Array<String> | String | Function) - Optional - 海岸线颜色 (default: [0.18,0.63,0.94,1])
        - **opts.styles.nation-stroke** (Array<String> | String | Function) - Optional - 国境线颜色 (default: [0.35,0.35,0.35,1])
        - **opts.styles.province-stroke** (Array<String> | String | Function) - Optional - 省界颜色 (default: [0.5,0.5,0.5,1])
        - **opts.styles.city-stroke** (Array<String> | String | Function) - Optional - 城市界颜色 (default: [0.7,0.7,0.7,1])
        - **opts.styles.county-stroke** (Array<String> | String | Function) - Optional - 区/县界颜色 (default: [0.85,0.85,0.85,1])
        - **opts.styles.fill** (Array<String> | String | Function) - Optional - 填充色 (default: [1,1,1,1])

### Response
#### Success Response (200)
- **object** - 图层参数信息

### Response Example
```json
{
  "message": "DistrictLayer initialized successfully"
}
```
```

```APIDOC
## POST /amap-skills/setSOC

### Description
Sets the country to be displayed.

### Method
POST

### Endpoint
/amap-skills/setSOC

### Parameters
#### Request Body
- **SOC** (String) - Required - SOC

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "SOC set successfully"
}
```
```

```APIDOC
## POST /amap-skills/setDistricts

### Description
Sets the adcodes for the district layer.

### Method
POST

### Endpoint
/amap-skills/setDistricts

### Parameters
#### Request Body
- **adcodes** (Array<any> | string | number) - Required - adcodes

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "Adcodes set successfully"
}
```
```

```APIDOC
## GET /amap-skills/getDistricts

### Description
Gets the currently set adcodes.

### Method
GET

### Endpoint
/amap-skills/getDistricts

### Response
#### Success Response (200)
- **any** - adcodes

### Response Example
```json
["100000", "100001"]
```
```

```APIDOC
## POST /amap-skills/setStyles

### Description
Sets the style information for the district layer.

### Method
POST

### Endpoint
/amap-skills/setStyles

### Parameters
#### Request Body
- **styles** (DistrictLayerStyle) - Required - 样式信息
    - **styles.stroke-width** (Number | Function) - Optional - 描边线宽 (default: 1)
    - **styles.zIndex** (Number | Function) - Optional - 图层中每个区域层级 (default: 0)
    - **styles.coastline-stroke** (Array<String> | String | Function) - Optional - 海岸线颜色 (default: [0.18,0.63,0.94,1])
    - **styles.nation-stroke** (Array<String> | String | Function) - Optional - 国境线颜色 (default: [0.35,0.35,0.35,1])
    - **styles.province-stroke** (Array<String> | String | Function) - Optional - 省界颜色 (default: [0.5,0.5,0.5,1])
    - **styles.city-stroke** (Array<String> | String | Function) - Optional - 城市界颜色 (default: [0.7,0.7,0.7,1])
    - **styles.county-stroke** (Array<String> | String | Function) - Optional - 区/县界颜色 (default: [0.85,0.85,0.85,1])
    - **styles.fill** (Array<String> | String | Function) - Optional - 填充色 (default: [1,1,1,1])

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "Styles set successfully"
}
```
```

```APIDOC
## GET /amap-skills/getStyles

### Description
Gets the current style information.

### Method
GET

### Endpoint
/amap-skills/getStyles

### Response
#### Success Response (200)
- **DistrictLayerStyle** - 样式

### Response Example
```json
{
  "stroke-width": 1,
  "zIndex": 0,
  "coastline-stroke": [0.18,0.63,0.94,1],
  "nation-stroke": [0.35,0.35,0.35,1],
  "province-stroke": [0.5,0.5,0.5,1],
  "city-stroke": [0.7,0.7,0.7,1],
  "county-stroke": [0.85,0.85,0.85,1],
  "fill": [1,1,1,1]
}
```
```

```APIDOC
## POST /amap-skills/setAdcode

### Description
Sets the adcodes value.

### Method
POST

### Endpoint
/amap-skills/setAdcode

### Parameters
#### Request Body
- **adcodes** (Array<any> | string | number) - Required - adcodes

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "Adcode set successfully"
}
```
```

```APIDOC
## GET /amap-skills/getOptions

### Description
Gets the layer options information.

### Method
GET

### Endpoint
/amap-skills/getOptions

### Response
#### Success Response (200)
- **object** - 图层参数信息

### Response Example
```json
{
  "adcode": "100000",
  "SOC": "CHN",
  "depth": 0,
  "zIndex": 80,
  "opacity": 1,
  "visible": true,
  "zooms": [2, 20]
}
```
```

```APIDOC
## GET /amap-skills/getzIndex

### Description
Gets the layer's zIndex.

### Method
GET

### Endpoint
/amap-skills/getzIndex

### Response
#### Success Response (200)
- **Number** - zIndex 图层层级

### Response Example
```json
80
```
```

```APIDOC
## POST /amap-skills/setzIndex

### Description
Sets the layer's zIndex. Higher numbers indicate a higher layer level.

### Method
POST

### Endpoint
/amap-skills/setzIndex

### Parameters
#### Request Body
- **zIndex** (Number) - Required - 图层层级值

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "zIndex set successfully"
}
```
```

```APIDOC
## GET /amap-skills/getOpacity

### Description
Gets the layer's opacity.

### Method
GET

### Endpoint
/amap-skills/getOpacity

### Response
#### Success Response (200)
- **Number** - opacity 图层透明度

### Response Example
```json
1
```
```

```APIDOC
## POST /amap-skills/setOpacity

### Description
Sets the layer's opacity. Range is [0 ~ 1].

### Method
POST

### Endpoint
/amap-skills/setOpacity

### Parameters
#### Request Body
- **opacity** (Number) - Required - 图层透明度

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "Opacity set successfully"
}
```
```

```APIDOC
## GET /amap-skills/getZooms

### Description
Gets the zoom level range for the layer. Default is [2-20].

### Method
GET

### Endpoint
/amap-skills/getZooms

### Response
#### Success Response (200)
- **Array<number>** - 缩放范围

### Response Example
```json
[2, 20]
```
```

```APIDOC
## POST /amap-skills/setZooms

### Description
Sets the zoom level range for the layer.

### Method
POST

### Endpoint
/amap-skills/setZooms

### Parameters
#### Request Body
- **zooms** (Array<number>) - Required - 缩放范围

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "Zooms set successfully"
}
```
```

```APIDOC
## POST /amap-skills/show

### Description
Shows the district layer.

### Method
POST

### Endpoint
/amap-skills/show

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "District layer shown"
}
```
```

```APIDOC
## POST /amap-skills/hide

### Description
Hides the district layer.

### Method
POST

### Endpoint
/amap-skills/hide

### Response
#### Success Response (200)
- **message** (String) - Confirmation message

### Response Example
```json
{
  "message": "District layer hidden"
}
```
```

```APIDOC
## GET /amap-skills/World

### Description
Retrieves world-level administrative districts.

### Method
GET

### Endpoint
/amap-skills/World

### Response
#### Success Response (200)
- **Array<object>** - World administrative districts data

### Response Example
```json
[
  {
    "adcode": "100000",
    "name": "World"
  }
]
```
```

```APIDOC
## GET /amap-skills/Country

### Description
Retrieves country-level administrative districts.

### Method
GET

### Endpoint
/amap-skills/Country

### Response
#### Success Response (200)
- **Array<object>** - Country administrative districts data

### Response Example
```json
[
  {
    "adcode": "100000",
    "name": "China"
  },
  {
    "adcode": "200000",
    "name": "United States"
  }
]
```
```

```APIDOC
## GET /amap-skills/Province

### Description
Retrieves province-level administrative districts. Only supports China regions.

### Method
GET

### Endpoint
/amap-skills/Province

### Response
#### Success Response (200)
- **Array<object>** - Province administrative districts data

### Response Example
```json
[
  {
    "adcode": "100000",
    "name": "Beijing"
  },
  {
    "adcode": "200000",
    "name": "Shanghai"
  }
]
```
```

--------------------------------

### Implement InfoWindow

Source: https://context7.com/amap-web/amap-skills/llms.txt

Create and manage map popups with custom HTML content. Use 'isCustom: true' for fully styled elements or standard configuration for default behavior.

```javascript
// Create info window
const infoWindow = new AMap.InfoWindow({
  content: `
    <div style="padding: 10px;">
      <h4 style="margin: 0 0 8px;">Tiananmen Square</h4>
      <p style="margin: 0; color: #666;">Beijing, China</p>
    </div>
  `,
  anchor: 'bottom-center',
  offset: new AMap.Pixel(0, -30),
  autoMove: true,
  closeWhenClickMap: true,
});

// Open at position
infoWindow.open(map, [116.397, 39.909]);

// Open on marker click
const marker = new AMap.Marker({ position: [116.397, 39.909] });
map.add(marker);

marker.on('click', (e) => {
  infoWindow.setContent('<div>Clicked marker info</div>');
  infoWindow.open(map, e.target.getPosition());
});

// Custom styled info window
const customInfoWindow = new AMap.InfoWindow({
  isCustom: true,
  content: createCustomContent(),
  offset: new AMap.Pixel(0, -45),
});

function createCustomContent() {
  const div = document.createElement('div');
  div.innerHTML = `
    <div style="
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      min-width: 200px;
    ">
      <div style="background: #1890ff; color: white; padding: 12px; border-radius: 8px 8px 0 0;">
        <strong>Custom Window</strong>
      </div>
      <div style="padding: 12px;">Content here</div>
    </div>
  `;
  return div;
}

// Close info window
infoWindow.close();
map.clearInfoWindow();
```

--------------------------------

### Create an ImageLayer

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/layers-custom.md

Instantiate an ImageLayer with specified URL, bounds, and zoom levels. Ensure the URL points to a valid image and bounds are correctly defined.

```javascript
var imageLayer = new AMap.ImageLayer({
     url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
     bounds: new AMap.Bounds(
         [116.327911, 39.939229],
         [116.342659, 39.946275]
     ),
     zooms: [10, 18]
 });
```

--------------------------------

### Project Directory Structure

Source: https://github.com/amap-web/amap-skills/blob/main/README.md

The expected file layout after configuring the skills directory.

```text
your-project/
├── .cursor/
│   └── skills/
│       └── amap-jsapi-skill/
│           ├── SKILL.md
|           └── api
|               |——map.md
|               |——layers.md
│           └── references/
│               ├── map-init.md
│               ├── marker.md
│               ├── security.md
│               └── ...
├── src/
├── package.json
└── ...
```

--------------------------------

### Initialize and Control IndoorMap

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/layers-official.md

Demonstrates creating a standalone indoor map layer or utilizing the default map indoor layer.

```javascript
用法一：创建独立的室内图层
var indoorMap = new AMap.IndoorMap({
 zIndex: 1000, // 设置室内图层叠加顺序
 opacity: 1, // 设置室内图层透明度
});
var map = new AMap.Map('mapDiv', {
 showIndoorMap: false, //隐藏地图默认的室内地图图层
 layers: [indoorMap, AMap.createDefaultLayer()] // 添加室内等图层
});
indoorMap.showIndoorMap('B0FFFAB6J2'); // 显示指定 POI 室内信息

用法二：调用默认室内图层
var map = new AMap.Map('mapDiv',{
 showIndoorMap: true, //显示地图默认的室内地图图层
});
map.on('indoor_create',function(){
 map.indoorMap.showIndoorMap('B000A8VT15',4); // 显示指定 POI 室内信息
})
```

--------------------------------

### Initialize and Search Public Transit Transfer

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/routing.md

Demonstrates loading the Transfer plugin, configuring transit options, and performing a search between two coordinates.

```javascript
var trans;
mapObj.plugin(["AMap.Transfer"], function() { //加载公交换乘插件
   transOptions = {
       city: '北京市', //公交城市
       policy: AMap.TransferPolicy.LEAST_TRANSFER //乘车策略
   };
   trans = new AMap.Transfer (transOptions); //构造公交换乘类
   AMap.Event.addListener(trans, "complete", trans_CallBack); //返回导航查询结果
   AMap.Event.addListener(trans, "error", function(e){alert(e.info);}); //返回错误信息
   //根据起、终点坐标查询公交换乘路线
   trans.search(new AMap.LngLat(116.379018, 39.865026), new AMap.LngLat(116.42732, 39.903752));
});
```

--------------------------------

### Initialize Marker Animation

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Sets up a marker with a path and custom durations for each segment using the AMap.MoveAnimation plugin.

```javascript
const path = [
    new AMap.LngLat(116.397389, 39.909466),
    new AMap.LngLat(116.379707, 39.968168),
    new AMap.LngLat(116.434467, 39.95001),
    new AMap.LngLat(116.46365, 39.979481),
    new AMap.LngLat(116.397389, 39.909466),
];
// 分段设置时长
const customData = [
    { position: path[0], duration: 200 },
    { position: path[1], duration: 400 },
    { position: path[2], duration: 600 },
    { position: path[3], duration: 800 },
    { position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 Marker 实例
    const animationMarker = new AMap.Marker({
        position: new AMap.LngLat(116.397389,39.909466),
        angle: 90,
    });
    // 调用 moveAlong 方法
    animationMarker.moveAlong(customData);
});
```

--------------------------------

### Clone AMap Skills Repository

Source: https://github.com/amap-web/amap-skills/blob/main/README.md

Use Git to download the skill files locally.

```bash
# Clone the repository locally
git clone https://github.com/AMap-Web/amap-skills.git

# Enter the directory
cd amap-skills
```

--------------------------------

### Initialize AMap.StationSearch

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/services-other.md

Load the StationSearch plugin and instantiate the search class with pagination and city settings.

```javascript
//加载公交站点查询插件
mapObj.plugin(["AMap.StationSearch"], function() {
   //实例化公交站点查询类
   var station = new AMap.StationSearch({
       pageIndex: 1, //页码
       pageSize: 10, //单页显示结果条数
       city:'010'    //确定搜索城市
   });
   station.search('东直门'); //查询
   AMap.event.addListener(station, 'complete', stationSearch_CallBack);
   AMap.event.addListener(station, 'error', function(e) {alert(e.info);});
});
```

--------------------------------

### Initialize AMap.LineSearch

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/services-other.md

Load the LineSearch plugin and instantiate the search class with specific extensions for detailed route information.

```javascript
//加载公交线路查询插件
mapObj.plugin(["AMap.LineSearch"], function() {
    //实例化公交线路查询类
    var linesearch = new AMap.LineSearch({
        pageIndex:1,
        pageSize:1,
        extensions:'all'
    });
    //搜索“536”相关公交线路
    linesearch.search('536');
    AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
   AMap.event.addListener(citysearch, "error", function(e){alert(e.info);});
});
```

--------------------------------

### Walking Route Planning with Amap

Source: https://context7.com/amap-web/amap-skills/llms.txt

Plan walking routes using AMap.Walking, with options for dashed line styling. Ensure the AMap.Walking plugin is loaded.

```javascript
AMapLoader.load({
  key: 'your-key',
  version: '2.0',
  plugins: ['AMap.Walking'],
}).then((AMap) => {
  const walking = new AMap.Walking();

  walking.search(
    [116.379028, 39.865042],
    [116.385281, 39.870719],
    (status, result) => {
      if (status === 'complete') {
        const route = result.routes[0];
        const path = [];
        route.steps.forEach((step) => path.push(...step.path));

        // Draw dashed walking route
        const polyline = new AMap.Polyline({
          path: path,
          strokeColor: '#52c41a',
          strokeWeight: 5,
          strokeStyle: 'dashed',
          strokeDasharray: [10, 5],
        });
        map.add(polyline);

        // Route info
        const distance = route.distance < 1000
          ? `${route.distance} m` 
          : `${(route.distance / 1000).toFixed(1)} km`;
        const time = `${Math.round(route.time / 60)} minutes`;
        console.log(`Walking: ${distance}, ${time}`);

        map.setFitView();
      }
    }
  );
});
```

--------------------------------

### Initialize and Use CloudDataSearch

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/search.md

Initializes the CloudDataSearch service with map and panel options, then performs a nearby search. Ensure the AMap.CloudDataSearch plugin is loaded before use.

```javascript
AMap.plugin('AMap.CloudDataSearch'， function(){
    var map = new AMap.Map("map", {
       resizeEnable: true,
       zoom: 12 //地图显示的缩放级别
    });
    var search, center = new AMap.LngLat(116.39946, 39.910829);
    var searchOptions = {
       map: map,
       panel: 'panel',
       keywords: '',
       pageSize: 5,
       orderBy: '_id:ASC'
    };
    search = new AMap.CloudDataSearch('532b9b3ee4b08ebff7d535b4', searchOptions);
    search.searchNearBy(center, 1000);
});
```

--------------------------------

### Create Text Overlay

Source: https://github.com/amap-web/amap-skills/blob/main/amap-jsapi-skill/references/api/marker.md

Initializes a text marker with specific position, anchor, content, and style.

```javascript
var text = new AMap.Text({
    position: new AMap.LngLat(116.397428, 39.90923),
    anchor: 'bottom-center',
    text: '文本标记',
    style: {'background-color':'red'},
});
map.add(text);
```

--------------------------------

### Initialize AMap with AMapLoader

Source: https://context7.com/amap-web/amap-skills/llms.txt

Asynchronously load AMap JSAPI v2.0 and initialize a map instance. Ensure security configuration is set prior to loading. Supports plugins and the Loca visualization library.

```javascript
import AMapLoader from '@amap/amap-jsapi-loader';

// Security config must be set before loading
window._AMapSecurityConfig = {
  securityJsCode: 'your-security-key',
};

AMapLoader.load({
  key: 'your-web-key',           // Required: Web developer key
  version: '2.0',                // Required: API version
  plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder'], // Preload plugins
  Loca: { version: '2.0.0' },    // Optional: Loca visualization library
}).then((AMap) => {
  // Set app identifier for tracking (required before creating map)
  AMap.getConfig().appname = 'amap-jsapi-skill';

  const map = new AMap.Map('container', {
    viewMode: '3D',              // Enable 3D mode (recommended)
    zoom: 11,                    // Initial zoom level [2-20]
    center: [116.397428, 39.90923], // Initial center [lng, lat]
    pitch: 45,                   // Pitch angle [0-83]
    rotation: 0,                 // Rotation angle
    mapStyle: 'amap://styles/normal', // Map style
  });

  // Add controls
  map.addControl(new AMap.Scale());
  map.addControl(new AMap.ToolBar({ position: 'RT' }));

  // Map load complete event
  map.on('complete', () => console.log('Map loaded successfully'))
}).catch((e) => console.error('Map loading failed:', e));
```