---
name: "MapContext.addMarkers"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "MapContext.addMarkers - 添加 marker"
---

## MapContext.addMarkers

> [VERSION] Base Library >= 2.21.8

### Description

Add marker

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `option` | `AddMarkersOption` | Yes | Marker options |

### Return Value

None


### Referenced Types

##### `interface` AddMarkersOption

| Property | Type | Description |
| --- | --- | --- |
| `markers` | `MapMarker[]` | Same as the marker property passed to the map component |
| `clear` | `boolean` | Whether to clear all markers on the map first |
| `success` | `() => void` | Callback invoked on successful API call |
| `fail` | `(result: MapFailResult) => void` | Callback on failure |
| `complete` | `() => void` | Callback on complete (success or failure) |

##### `interface` MapMarker

| Property | Type | Description |
| --- | --- | --- |
| `id` | `number` | marker ID |
| `clusterId` | `number` | Cluster ID |
| `joinCluster` | `boolean` | Whether to participate in clustering |
| `latitude` | `number` | Latitude |
| `longitude` | `number` | Longitude |
| `title` | `string` | Marker name |
| `zIndex` | `number` | Display level |
| `iconPath` | `string` | Path of the icon to display |
| `rotate` | `number` | Rotation angle |
| `alpha` | `number` | Marker opacity |
| `width` | `number \| string` | Marker icon width |
| `height` | `number \| string` | Marker icon height |
| `callout` | `MapCallout` | Custom callout above the marker |
| `customCallout` | `MapCallout` | Custom callout |
| `label` | `MapLabel` | Add a label next to the marker |
| `anchor` | `MapAnchor` | Anchor point of the coordinate on the marker icon |

##### `interface` MapFailResult

| Property | Type | Description |
| --- | --- | --- |
| `errorCode` | `string` | Error code |
| `errorMsg` | `string` | Error message |

##### `interface` MapCallout

| Property | Type | Description |
| --- | --- | --- |
| `content` | `string` | Text |
| `color` | `string` | Text color |
| `fontSize` | `number` | Font size |
| `borderRadius` | `number` | Border radius |
| `borderWidth` | `number` | Border width |
| `borderColor` | `string` | Border color |
| `bgColor` | `string` | Background color |
| `padding` | `number` | Text padding |
| `textAlign` | `"left" \| "right" \| "center"` | Text alignment |
| `anchorX` | `number` | Horizontal offset, positive to the right |
| `anchorY` | `number` | Vertical offset, positive downward |

##### `interface` MapLabel

| Property | Type | Description |
| --- | --- | --- |
| `content` | `string` | Text |
| `color` | `string` | Text color |
| `fontSize` | `number` | Font size |
| `borderRadius` | `number` | Border radius |
| `borderWidth` | `number` | Border width |
| `borderColor` | `string` | Border color |
| `bgColor` | `string` | Background color |
| `padding` | `number` | Text padding |
| `textAlign` | `"left" \| "right" \| "center"` | Text alignment |
| `anchorX` | `number` | Horizontal offset, positive to the right |
| `anchorY` | `number` | Vertical offset, positive downward |

##### `interface` MapAnchor

| Property | Type | Description |
| --- | --- | --- |
| `x` | `number` | Horizontal anchor, range 0-1 |
| `y` | `number` | Vertical anchor, range 0-1 |


### Examples

#### Add marker

```ts
const mapCtx = ty.createMapContext('myMap');
mapCtx.addMarkers({
  markers: [
    {
      id: 1,
      latitude: 30.0,
      longitude: 120.0,
      iconPath: '/images/marker.png',
      width: 30,
      height: 30,
    },
  ],
  clear: false,
  success(res) {
    console.log('Marker added successfully', res);
  },
});
```