---
name: "map"
mode: "kit"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
---

## map

> [VERSION] Base Library >= 2.10.0

### Description

Map component.

### Parameters

None


### Examples

#### Markers and callouts

*index.tyml*

```xml
<map
  longitude="{{lng}}"
  latitude="{{lat}}"
  scale="{{14}}"
  min-scale="{{10}}"
  max-scale="{{18}}"
  markers="{{markers}}"
  class="map"
  bind:markertap="onMarkerTap"
  bind:callouttap="onCalloutTap"
/>
```

*index.tyss*

```css
.map {
  width: 100%;
  height: 500rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    lng: 116.397428,
    lat: 39.90923,
    markers: [
      {
        id: 1,
        longitude: 116.397428,
        latitude: 39.90923,
        title: 'Tiananmen',
        iconPath: '/images/marker.png',
        width: 30,
        height: 30,
        callout: {
          content: 'Tiananmen Square',
          color: '#333',
          fontSize: 14,
          bgColor: '#fff',
          borderRadius: 4,
          padding: 8,
          textAlign: 'center',
        },
      },
      {
        id: 2,
        longitude: 116.407428,
        latitude: 39.91523,
        title: 'Forbidden City',
        iconPath: '/images/marker.png',
        width: 30,
        height: 30,
      },
    ],
  },
  onMarkerTap(e) {
    console.log('Marker tapped:', e.detail.markerId);
  },
  onCalloutTap(e) {
    console.log('Callout tapped:', e.detail.markerId);
  },
});
```

#### Routes and overlays

*index.tyml*

```xml
<map
  longitude="{{lng}}"
  latitude="{{lat}}"
  scale="{{13}}"
  polyline="{{polyline}}"
  circles="{{circles}}"
  polygons="{{polygons}}"
  class="map"
  bind:regionchange="onRegionChange"
/>
```

*index.tyss*

```css
.map {
  width: 100%;
  height: 500rpx;
  border-radius: 12px;
}
```

*index.js*

```javascript
Page({
  data: {
    lng: 116.407428,
    lat: 39.91523,
    polyline: [
      {
        points: [
          { latitude: 39.90923, longitude: 116.397428 },
          { latitude: 39.91523, longitude: 116.407428 },
          { latitude: 39.92023, longitude: 116.417428 },
        ],
        color: '#1890ff',
        width: 4,
        dottedLine: false,
      },
    ],
    circles: [
      {
        latitude: 39.90923,
        longitude: 116.397428,
        radius: 500,
        color: '#1890ff80',
        fillColor: '#1890ff20',
        strokeWidth: 2,
      },
    ],
    polygons: [
      {
        points: [
          { latitude: 39.91, longitude: 116.40 },
          { latitude: 39.92, longitude: 116.41 },
          { latitude: 39.91, longitude: 116.42 },
        ],
        strokeColor: '#ff4d4f',
        fillColor: '#ff4d4f20',
        strokeWidth: 2,
      },
    ],
  },
  onRegionChange(e) {
    console.log('Region change:', e.detail.type);
  },
});
```