map components
System map (iOS support only)
| attribute | type | Default value | Required | Introductions | Support Level |
|---|---|---|---|---|---|
| longitude | number | 116.46 | yes | Central longitude | ✅ |
| latitude | number | 39.92 | yes | Central latitude | ✅ |
| scale | number | 16 | no | Zoom level, values range from 3-20 | ✅ |
| min-scale | number | 3 | no | Minimum Zoom Level | ✅ |
| max-scale | number | 20 | no | Maximum zoom level | ✅ |
| markers | Array.marker | no | Marker point | ✅ | |
| polyline | Array.polyline | no | route | ✅ | |
| circles | Array.circle | no | circular | ✅ | |
| controls | Array.control | no | Control is about to be deprecated and recommended cover-view Substitute) | ❌ | |
| include-points | Array.point | no | Scale the field of view to include all the given coordinate points | ✅ | |
| show-location | boolean | false | no | Displays the current anchor point with direction | ✅ |
| polygons | Array.polygon | no | polygon | ✅ | |
| subkey | - | no | Personalized Map Configuration Style, does not support dynamic modification | ❌ | |
| layer-style | - | no | Personalized Map Configuration Style, does not support dynamic modification | ❌ | |
| rotate | number | 0 | no | Angle of rotation 0 360, Map due north and equipment and Angle of axis angle | ❌ |
| skew | number | 0 | no | Angle, range 0 40 , about with Inclination angle of shaft | ❌ |
| enable-3D | boolean | false | no | Display 3D block(Tools not supported) | ✅ |
| show-compass | boolean | false | no | Show compass | ✅ |
| show-scale | boolean | false | no | Display scale, tool does not support | ✅ |
| enable-overlooking | boolean | false | no | Open up Overlook | ❌ |
| enable-zoom | boolean | true | no | Whether scaling is supported | ✅ |
| enable-scroll | boolean | true | no | Drag supported | ✅ |
| enable-rotate | boolean | false | no | Support for rotation | ✅ |
| enable-satellite | boolean | false | no | Whether to turn on satellite imagery | ✅ |
| enable-traffic | boolean | false | no | Whether to turn on real-time traffic | ✅ |
| enable-poi | boolean | true | no | Whether to show THEN poin | ✅ |
| enable-building | boolean | no | Whether to display buildings | ✅ | |
| setting | object | no | Configuration item | ✅ | |
| bindtap | eventhandle | no | Triggered when the map is clicked, Return latitude and longitude information | ❌ | |
| bindmarkertap | eventhandle | no | Triggered when the marker point is clicked, e.detail = {markerId} | ❌ | |
| bindlabeltap | eventhandle | no | Triggered when the label is clicked, e.detail = {markerId} | ❌ | |
| bindcontroltap | eventhandle | no | Triggered when the control is clicked, e.detail = {controlId} | ❌ | |
| bindcallouttap | eventhandle | no | When you click on the bubble corresponding to the marker point, e.detail = {markerId} | ❌ | |
| bindupdated | eventhandle | no | Triggered when the map render update is complete | ❌ | |
| bindregionchange | eventhandle | no | Triggered when visual field changes | ✅ | |
| bindpoitap | eventhandle | no | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | ❌ | |
| bindanchorpointtap | eventhandle | no | When the positioning mark is clicked, e.detail = {longitude, latitude} | ❌ |
marker
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Marker point id | number | no | marker Click the event callback to return this id。 | ✅ |
| clusterId | Aggregate cluster id | number | no | To customize the point cluster effect | ✅ |
| joinCluster | Participate in point aggregation | Boolean | no | Default does not participate in point aggregation | ❌ |
| latitude | latitude | number | yes | Floating point number, range -90 90 | ✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | ✅ |
| title | Calling-out | string | no | Shown when clicked, and ignored when callout exists | ✅ |
| zIndex | Display level | number | no | ❌ | |
| iconPath | Display icons | string | yes | Project directory under the picture path, support network path, local path, code package path | ✅ |
| rotate | Rotation angle | number | no | The angle of a clockwise rotation 0 360, default to 0 | ❌ |
| alpha | Annotated transparency | number | no | default 1, no transparency, scope 0 1 | ❌ |
| width | Label icon width | number/string | no | Label icon width | ❌ |
| height | Mark icon height | number | no | Default is the actual height of the picture | ❌ |
| callout | Bubble window above the marker point | Object | no | The supported properties are shown in the following table and are recognized as newlines. | ✅ |
| customCallout | Custom bubble window | object | no | ❌ | |
| label | Add labels next to marker points | Object | no | The supported properties are shown in the following table and are recognized as newlines. | ❌ |
| anchor | Latitude and longitude at anchor point of callout icon, default bottom midpoint | Object | no | Latitude and longitude at anchor point of callout icon, default bottom midpoint | ❌ |
| aria-label | Accessibility, additional description of (attribute) elements | string | no | ❌ |
marker Bubbles on top callout
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | ✅ | |
| color | Text color | string | ❌ | |
| fontSize | Text size | number | ❌ | |
| borderRadius | Border fillet | number | ❌ | |
| borderWidth | Border width | string | ❌ | |
| borderColor | Border color | string | ❌ | |
| bgColor | Background color | string | ❌ | |
| padding | Text margin | number | ❌ | |
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | ❌ | |
| textAlign | 'BYCLICK ': Click Show 'Always': Chang Hin | string | ❌ | |
| anchorX | Lateral offset, positive to the right | number | ❌ | |
| anchorY | Vertical offset, positive downward | number | ❌ |
marker Custom bubbles on customCallout
The callout and title attributes are ignored when customCallout exists. The custom bubble adopts cover-view customization, which is more flexible.
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | ❌ | |
| anchorX | Lateral offset, positive to the right | number | ❌ | |
| anchorY | Vertical offset, positive downward | number | ❌ |
The slot node named callout is added to the map component. Its internal cover-view is bound to the marker through the mark-id attribute. When the marker is created, the content displayed by the cover-view will be displayed as a callout above the marker point.
js
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>marker Bubbles on top label
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | ✅ | |
| color | Text color | string | ❌ | |
| fontSize | Text size | number | ❌ | |
| anchorX | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | ❌ | |
| anchorY | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | ❌ | |
| borderWidth | Border width | number | ❌ | |
| borderColor | Border color | string | ❌ | |
| borderRadius | Border fillet | number | ❌ | |
| padding | Text margin | number | ❌ | |
| textAlign | Text alignment. Valid value: left, right, center | string | ❌ |
polyline
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | ✅ |
| color | Longitude and latitude array | string | no | Hexadecimal | ✅ |
| colorList | Rainbow line | array | no | Ignore when present color value | ❌ |
| width | Width of line | number | no | ✅ | |
| dottedLine | Whether dashed lines | boolean | no | default false | ❌ |
| arrowLine | Lines with arrows | boolean | no | default false | ❌ |
| arrowIconPath | Replace Arrow Icon | string | no | in arrowLine for true Effective | ❌ |
| borderColor | Border color of line | string | no | ❌ | |
| borderWidth | Thickness of line | number | no | ❌ | |
| level | Gland relation | string | no | Default is abovelabels | ❌ |
polygon
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | ✅ |
| strokeWidth | Longitude and latitude array | number | no | ✅ | |
| strokeColor | Stroke color | string | no | Hexadecimal | ✅ |
| fillColor | Stroke color | string | no | Hexadecimal | ✅ |
| zIndex | Set polygon z-axis value | number | no | ✅ | |
| level | Gland relation | string | no | Default is abovelabels | ❌ |
circle
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| latitude | latitude | number | yes | Floating point number, range -90 90 | ✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | ✅ |
| color | Stroke color | string | no | Hexadecimal | ✅ |
| fillColor | Fill color | string | no | Hexadecimal | ✅ |
| radius | Radius | number | yes | ✅ | |
| strokeWidth | Radius | number | no | ✅ | |
| level | Gland relation | string | no | Default is abovelabels | ❌ |
control
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Control id | number | no | Clicking on an event callback in a control returns this id | ❌ |
| position | Control location on the map | object | yes | Control relative map position | ❌ |
| iconPath | Display icons | string | yes | Project directory picture path, support local path, code package path | ❌ |
| clickable | Is it clickable? | boolean | no | Default not clickable | ❌ |
position
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| left | How far from the left edge of the map? | number | no | Defaults to 0 | ❌ |
| top | How far to the upper boundary of the map? | number | no | Defaults to 0 | ❌ |
| width | Control Width | number | no | Defaults to 0 | ❌ |
| height | Control Height | number | no | Defaults to 0 | ❌ |
Gaode Map
| attribute | type | Default value | Required | Introductions | Support Level |
|---|---|---|---|---|---|
| longitude | number | 116.46 | yes | Central longitude | iOS:✅ Android:✅ IDE:✅ |
| latitude | number | 39.92 | yes | Central latitude | iOS:✅ Android:✅ IDE:✅ |
| scale | number | 16 | no | Zoom level, values range from 3-20 | iOS:✅ Android:✅ IDE:✅ |
| min-scale | number | 3 | no | Minimum Zoom Level | iOS:✅ Android:✅ IDE:✅ Dynamic change is not supported |
| max-scale | number | 20 | no | Maximum zoom level | iOS:✅ Android:✅ IDE:✅ Dynamic change is not supported |
| markers | Array.marker | no | Marker point | iOS:✅ Android:✅ IDE:✅ | |
| polyline | Array.polyline | no | route | iOS:✅ Android:✅ IDE:✅ | |
| circles | Array.circle | no | circular | iOS:✅ Android:✅ IDE:✅ | |
| controls | Array.control | no | Control is about to be deprecated and recommended cover-view Substitute) | iOS:❌ Android:❌ IDE:✅ | |
| include-points | Array.point | no | Scale the field of view to include all the given coordinate points | iOS:✅ Android:✅ IDE:❌ | |
| show-location | boolean | false | no | Displays the current anchor point with direction | iOS:✅ Android:✅ IDE:❌ |
| polygons | Array.polygon | no | polygon | iOS:✅ Android:✅ IDE:✅ | |
| subkey | - | no | Key to personalize map usage | iOS:❌ Android:❌ IDE:❌ | |
| layer-style | - | no | Personalized Map Configuration Style, does not support dynamic modification | iOS:❌ Android:❌ IDE:❌ | |
| rotate | number | 0 | no | Angle of rotation 0 360, Map due north and equipment and Angle of axis angle | iOS:✅ Android:✅ IDE:✅ |
| skew | number | 0 | no | Angle, range 0 40 , about with Inclination angle of shaft | iOS:✅ Android:✅ IDE:✅ |
| enable-3D | boolean | false | no | Display 3D block(Tools not supported) | iOS:❌ Android:❌ IDE:❌ |
| show-compass | boolean | false | no | Show compass | iOS:✅ Android:✅ IDE:❌ |
| show-scale | boolean | false | no | Display scale, tool does not support | iOS:✅ Android:✅ IDE:✅ |
| enable-overlooking | boolean | false | no | Open up Overlook | iOS:✅ Android:✅ IDE:❌ |
| enable-zoom | boolean | true | no | Open up Overlook | iOS:✅ Android:✅ IDE:✅ |
| enable-scroll | boolean | true | no | Drag supported | iOS:✅ Android:✅ IDE:✅ |
| enable-rotate | boolean | false | no | Support for rotation | iOS:✅ Android:✅ IDE:✅ |
| enable-satellite | boolean | false | no | Whether to turn on satellite imagery | iOS:✅ Android:✅ IDE:✅ |
| enable-traffic | boolean | false | no | Whether to turn on real-time traffic | iOS:✅ Android:✅ IDE:✅ |
| enable-poi | boolean | true | no | Whether to show THEN point | iOS:✅ Android:✅ IDE:✅ |
| enable-building | boolean | no | Whether to display buildings | iOS:✅ Android:✅ IDE:✅ | |
| setting | object | no | Configuration item | iOS:✅ Android:✅ IDE:✅ | |
| bindtap | eventhandle | no | Triggered when the map is clicked, Return latitude and longitude information | iOS:✅ Android:✅ IDE:✅ | |
| bindmarkertap | eventhandle | no | Triggered when the map is clicked, Return latitude and longitude information from 2.9.0 | iOS:✅ Android:✅ IDE:✅ | |
| bindlabeltap | eventhandle | no | Triggered when the label is clicked, e.detail = {markerId} | iOS:❌ Android:❌ IDE:❌ | |
| bindcontroltap | eventhandle | no | Triggered when the control is clicked, e.detail = {controlId} | iOS:❌ Android:❌ IDE:✅ | |
| bindcallouttap | eventhandle | no | When you click on the bubble corresponding to the marker point, e.detail = {markerId} | iOS:✅ Android:✅ IDE:❌ | |
| bindupdated | eventhandle | no | Triggered when the map render update is complete | iOS:✅ Triggered only when the map is loaded Android:✅ Triggered only when the map is loaded IDE:❌ | |
| bindregionchange | eventhandle | no | Triggered when visual field changes, | iOS:✅ Android:✅ IDE:✅ | |
| bindpoitap | eventhandle | no | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | iOS:✅ Android:✅ IDE:❌ | |
| bindanchorpointtap | eventhandle | no | When the positioning mark is clicked, e.detail = {longitude, latitude} | iOS:✅ Android:✅ IDE:❌ |
marker
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Marker point id | number | no | marker Click the event callback to return this id | iOS:✅ Android:✅ IDE:✅ |
| clusterId | Aggregate cluster id | number | no | To customize the point cluster effect | iOS:❌ Android:✅ IDE:❌ |
| joinCluster | Participate in point aggregation | Boolean | no | Default does not participate in point aggregation | iOS:❌ Android:✅ IDE:❌ |
| latitude | latitude | number | yes | Floating point number, range -90 90 | iOS:✅ Android:✅ IDE:✅ |
| longitude | Floating point number, range -90 90 | number | yes | Floating point number, range -180 180 | iOS:✅ Android:✅ IDE:✅ |
| title | Calling-out | string | no | Shown when clicked, and ignored when callout exists | iOS:✅ Android:✅ IDE:✅ |
| zIndex | Display level | number | no | iOS:✅Android:✅ IDE:✅ | |
| iconPath | Display icons | string | yes | Project directory under the picture path, support network path, local path, code package path | iOS:✅ Android:✅ IDE:✅ |
| rotate | Rotation angle | number | no | The angle of a clockwise rotation 0 360, default to 0 | iOS:❌ Android:✅ IDE:✅ |
| alpha | Annotated transparency | number | no | default 1, no transparency, scope 0 1 | iOS:❌ Android:✅ IDE:✅ |
| width | Label icon width | number/string | no | Default is the actual width of the picture | iOS:✅ Android:✅ IDE:✅ |
| height | Mark icon height | number | no | Default is the actual height of the picture | iOS:✅ Android:✅ IDE:✅ |
| callout | Default is the actual height of the picture | Object | no | The supported properties are shown in the following table and are recognized as newlines. | iOS:✅ Android:✅ IDE:✅ |
| customCallout | Custom bubble window | number | no | iOS:✅ Android:✅ IDE:❌ | |
| label | Add labels next to marker points | Object | no | The supported properties are shown in the following table and are recognized as newlines. | iOS:❌ Android:❌ IDE:✅ |
| anchor | Latitude and longitude at anchor point of callout icon, default bottom midpoint | Object | no | {x, y}, x Represent horizontal(0-1), y Vertical(0-1). {x: .5, y: 1} Represents the midpoint of the bottom | iOS:❌ Android:✅ IDE:✅ |
| aria-label | Accessibility, additional description of (attribute) elements | string | no | iOS:❌ Android:❌ IDE:❌ |
marker Bubbles on top callout
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | iOS:✅ Android:✅ IDE:✅ | |
| color | Text color | string | iOS:✅ Android:✅ IDE:❌ | |
| fontSize | Text size | number | iOS:✅ Android:✅ IDE:❌ | |
| borderRadius | Border fillet | number | iOS:✅ Android:✅ IDE:✅ | |
| borderWidth | Border width | string | iOS:✅ Android:✅ IDE:❌ | |
| borderColor | Border color | string | iOS:✅ Android:✅ IDE:❌ | |
| bgColor | Background color | string | iOS:✅ Android:✅ IDE:❌ | |
| padding | Text margin | number | iOS:❌ Android:✅ IDE:❌ | |
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | iOS:❌ Android:❌ IDE:❌ | |
| textAlign | Text alignment. Valid value: left, right, center | string | iOS:✅ Android:✅ IDE:❌ | |
| anchorX | Lateral offset, positive to the right | number | iOS:✅ Android:✅ IDE:❌ | |
| anchorY | Vertical offset, positive downward | number | iOS:✅ Android:✅ IDE:❌ |
marker Custom bubbles on customCallout
The callout and title attributes are ignored when customCallout exists. The custom bubble adopts cover-view customization, which is more flexible.
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | iOS:❌ Android:❌ IDE:❌ | |
| anchorX | Lateral offset, positive to the right | number | iOS:✅ Android:✅ IDE:❌ | |
| anchorY | Vertical offset, positive downward | number | iOS:✅ Android:✅ IDE:❌ |
The slot node named callout is added to the map component. Its internal cover-view is bound to the marker through the mark-id attribute. When the marker is created, the content displayed by the cover-view will be displayed as a callout above the marker point.
js
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>marker Bubbles on top label
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | iOS:❌ Android:❌ IDE:✅ | |
| color | Text color | string | iOS:❌ Android:❌ IDE:❌ | |
| fontSize | Text size | number | iOS:❌ Android:❌ IDE:❌ | |
| anchorX | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | iOS:❌ Android:❌ IDE:❌ | |
| anchorY | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | iOS:❌ Android:❌ IDE:❌ | |
| borderWidth | Border width | number | iOS:❌ Android:❌ IDE:❌ | |
| borderColor | Border color | string | iOS:❌ Android:❌ IDE:❌ | |
| borderRadius | Border fillet | number | iOS:❌ Android:❌ IDE:❌ | |
| bgColor | Background color | string | iOS:❌ Android:❌ IDE:❌ | |
| padding | Text margin | number | iOS:❌ Android:❌ IDE:❌ | |
| textAlign | Text alignment. Valid value: left, right, center | string | iOS:❌ Android:❌ IDE:❌ |
polyline
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ IDE:✅ |
| color | The color of the line | string | no | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| colorList | The color of the line | array | no | Ignore when present color value | iOS:❌ Android:✅ IDE:❌ |
| width | Width of line | number | no | iOS:✅ Android:✅ IDE:✅ | |
| dottedLine | Whether dashed lines | boolean | no | default false | iOS:❌ Android:✅ IDE:✅ |
| arrowLine | Lines with arrows | boolean | no | default false | iOS:❌ Android:✅ IDE:✅ |
| arrowIconPath | Replace Arrow Icon | string | no | in arrowLine for true Effective | iOS:✅ Android:✅ IDE:✅ |
| borderColor | Border color of line | string | no | iOS:❌ Android:❌ IDE:✅ | |
| borderWidth | Thickness of line | number | no | iOS:❌ Android:❌ IDE:✅ | |
| level | Gland relation | string | no | in arrowLine for true Effective | iOS:❌ Android:✅ aboveroads Equivalent to abovebuildings IDE:✅ |
polygon
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ IDE:✅ |
| strokeWidth | Width of stroke | number | no | iOS:✅ Android:✅ IDE:✅ | |
| strokeColor | Stroke color | string | no | Gland relation | iOS:✅ Android:✅ IDE:✅ |
| fillColor | Fill color | string | no | Gland relation | iOS:✅ Android:✅ IDE:✅ |
| zIndex | Set polygon z-axis value | number | no | iOS:✅ Android:✅ IDE:✅ | |
| level | Gland relation | string | no | Default is abovelabels | iOS:❌ Android:✅ aboveroads Equivalent to abovebuildings IDE:✅ |
circle
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| latitude | latitude | number | yes | Floating point number, range -90 90 | iOS:✅ Android:✅ IDE:✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | iOS:✅ Android:✅ IDE:✅ |
| color | Stroke color | string | no | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| fillColor | Fill color | string | no | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| radius | Radius | number | yes | iOS:✅ Android:✅ IDE:✅ | |
| strokeWidth | Width of stroke | number | no | iOS:✅ Android:✅ IDE:✅ | |
| level | Gland relation | string | no | Default is abovelabels | iOS:❌ Android:✅ aboveroads Equivalent to abovebuildings IDE:✅ |
control
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Control id | number | no | Clicking on an event callback in a control returns this id | iOS:❌ Android:❌ IDE:✅ |
| position | Control id | object | yes | Clicking on an event callback in a control returns this id | iOS:❌ Android:❌ IDE:✅ |
| iconPath | Display icons | string | yes | Project directory picture path, support local path, code package path | iOS:❌ Android:❌ IDE:✅ |
| clickable | Is it clickable? | boolean | no | Default not clickable | iOS:❌ Android:❌ IDE:✅ |
position
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| left | How far from the left edge of the map? | number | no | Defaults to 0 | iOS:❌ Android:❌ IDE:✅ |
| top | How far to the upper boundary of the map? | number | no | Defaults to 0 | iOS:❌ Android:❌ IDE:✅ |
| width | Control Width | number | no | Defaults to 0 | iOS:❌ Android:❌ IDE:✅ |
| height | Control Height | number | no | Defaults to 0 | iOS:❌ Android:❌ IDE:✅ |
Baidu Maps (iOS, Android support only)
| attribute | type | Default value | Required | Introductions | Support Level |
|---|---|---|---|---|---|
| longitude | number | 116.46 | yes | Central longitude | iOS:✅ Android:✅ |
| latitude | number | 39.92 | yes | Central latitude | iOS:✅ Android:✅ |
| scale | number | 16 | no | Zoom level, values range from 3-20 | iOS:✅ Android:✅ |
| min-scale | number | 3 | no | Minimum Zoom Level | iOS:✅ Android:✅ |
| max-scale | number | 20 | no | Maximum zoom level | iOS:✅ Android:✅ |
| markers | Array.marker | no | Marker point | iOS:✅ Android:✅ | |
| polyline | Array.polyline | no | route | iOS:✅ Android:✅ | |
| circles | Array.circle | no | circular | iOS:✅ Android:✅ | |
| controls | Array.control | no | Control is about to be deprecated and recommended cover-view Substitute) | iOS:❌ Android:❌ | |
| include-points | Array.point | no | Scale the field of view to include all the given coordinate points | iOS:✅ Android:✅ | |
| show-location | boolean | false | no | Displays the current anchor point with direction | iOS:✅ Android:✅ |
| polygons | Array.polygon | no | polygon | iOS:✅ Android:✅ | |
| subkey | - | no | Key to personalize map usage | iOS:❌ Android:❌ | |
| layer-style | - | no | Personalized Map Configuration Style, does not support dynamic modification | iOS:❌ Android:❌ | |
| rotate | number | 0 | no | Angle of rotation 0 360, Map due north and equipment and Angle of axis angle | iOS:✅ Android:✅ |
| skew | number | 0 | no | Angle, range 0 40 , about with Inclination angle of shaft | iOS:✅ Android:✅ |
| enable-3D | boolean | false | no | Angle, range 0 40 , about with Inclination angle of shaft | iOS:✅ Android:✅ |
| show-compass | boolean | false | no | Show compass | iOS:✅ Android:✅ |
| show-scale | boolean | false | no | Display scale, tool does not support | iOS:✅ Android:✅ |
| enable-overlooking | boolean | false | no | Open up Overlook | iOS:✅ Android:✅ |
| enable-zoom | boolean | true | no | Whether scaling is supported | iOS:✅ Android:✅ |
| enable-scroll | boolean | true | no | Drag supported | iOS:✅ Android:✅ |
| enable-rotate | boolean | false | no | Support for rotation | iOS:✅ Android:✅ |
| enable-satellite | boolean | false | no | Whether to turn on satellite imagery | iOS:✅ Android:✅ |
| enable-traffic | boolean | false | no | Whether to turn on real-time traffic | iOS:✅ Android:✅ |
| enable-poi | boolean | true | no | Whether to show THEN point | iOS:✅ Android:✅ |
| enable-building | boolean | no | Whether to display buildings | iOS:❌ Android:❌ | |
| setting | object | no | Configuration item | iOS:✅ Android:✅ | |
| bindtap | eventhandle | no | Configuration item | iOS:✅ Android:✅ | |
| bindmarkertap | eventhandle | no | Triggered when the marker point is clicked, e.detail = {markerId} | iOS:✅ Android:✅ | |
| bindlabeltap | eventhandle | no | Triggered when the label is clicked, e.detail = {markerId} | iOS:❌ Android:❌ | |
| bindcontroltap | eventhandle | no | Triggered when the control is clicked, e.detail = {controlId} | iOS:❌ Android:❌ | |
| bindcallouttap | eventhandle | no | When you click on the bubble corresponding to the marker point, e.detail = {markerId} | iOS:✅ Android:✅ | |
| bindupdated | eventhandle | no | Triggered when the map render update is complete | iOS:✅ Triggered only when map loading is complete Android:✅ Triggered only when map loading is complete | |
| bindregionchange | eventhandle | no | Triggered when visual field changes | iOS:✅ Android:✅ | |
| bindpoitap | eventhandle | no | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | iOS:✅ Android:✅ | |
| bindanchorpointtap | eventhandle | no | When the positioning mark is clicked, e.detail = {longitude, latitude} | iOS:✅ Android:✅ |
marker
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Marker point id | number | no | marker Click the event callback to return this id | iOS:✅ Android:✅ |
| clusterId | Aggregate cluster id | number | no | To customize the point cluster effect | iOS:✅ Android:✅ |
| joinCluster | Participate in point aggregation | Boolean | no | Default does not participate in point aggregation | iOS:❌ Android:✅ |
| latitude | latitude | number | yes | Floating point number, range -90 90 | iOS:✅ Android:✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | iOS:✅ Android:✅ |
| title | Calling-out | string | no | Shown when clicked, and ignored when callout exists | iOS:✅ Android:✅ |
| zIndex | Display level | number | no | iOS:✅ Android:✅ | |
| iconPath | Display icons | string | yes | Project directory under the picture path, support network path, local path, code package path | iOS:✅ Android:✅ |
| rotate | Rotation angle | number | no | The angle of a clockwise rotation 0 360, default to 0 | iOS:❌ Android:✅ |
| alpha | Annotated transparency | number | no | default 1, no transparency, scope 0 1 | iOS:❌ Android:✅ |
| width | Label icon width | number/string | no | default 1, no transparency, scope 0 1 | iOS:✅ Android:✅ |
| height | Mark icon height | number | no | Default is the actual height of the picture | iOS:✅ Android:✅ |
| callout | Bubble window above the marker point | Object | no | The supported properties are shown in the following table and are recognized as newlines. | iOS:✅ Android:✅ |
| customCallout | Custom bubble window | object | no | iOS:✅ Android:✅ | |
| label | Add labels next to marker points | Object | no | The supported properties are shown in the following table and are recognized as newlines. | iOS:❌ Android:❌ |
| anchor | Latitude and longitude at anchor point of callout icon, default bottom midpoint | Object | no | {x, y}, x Represent horizontal(0-1), y Vertical(0-1). {x: .5, y: 1} Represents the midpoint of the bottom | iOS:✅ Android:✅ |
| aria-label | Accessibility, additional description of (attribute) elements | string | no | iOS:❌ Android:❌ |
marker Bubbles on top callout
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | iOS:✅ Android:✅ | |
| color | Text color | string | iOS:✅ Android:✅ | |
| fontSize | Text size | number | iOS:✅ Android:✅ | |
| borderRadius | Border fillet | number | iOS:✅ Android:✅ | |
| borderWidth | Border width | string | iOS:✅ Android:✅ | |
| borderColor | Border color | string | iOS:✅ Android:✅ | |
| bgColor | Background color | string | iOS:✅ Android:✅ | |
| padding | Text margin | number | iOS:✅ Android:✅ | |
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | iOS:❌ Android:✅ | |
| textAlign | Text alignment. Valid value: left, right, center | string | iOS:✅ Android:✅ | |
| anchorX | Lateral offset, positive to the right | number | iOS:✅ Android:❌ | |
| anchorY | Vertical offset, positive downward | number | iOS:✅ Android:✅ |
marker Bubbles on top customCallout
The callout and title attributes are ignored when customCallout exists. The custom bubble adopts cover-view customization, which is more flexible.
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | iOS:❌ Android:✅ | |
| anchorX | Lateral offset, positive to the right | number | iOS:✅ Android:✅ | |
| anchorY | Vertical offset, positive downward | number | iOS:✅ Android:✅ |
The slot node named callout is added to the map component. Its internal cover-view is bound to the marker through the mark-id attribute. When the marker is created, the content displayed by the cover-view will be displayed as a callout above the marker point.
js
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>marker Bubbles on top label
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | iOS:❌ Android:❌ | |
| color | Text color | string | iOS:❌ Android:❌ | |
| fontSize | Text size | number | iOS:❌ Android:❌ | |
| anchorX | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | iOS:❌ Android:❌ | |
| anchorY | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | iOS:❌ Android:❌ | |
| borderWidth | Border width | number | iOS:❌ Android:❌ | |
| borderColor | Border color | string | iOS:❌ Android:❌ | |
| borderRadius | Border fillet | number | iOS:❌ Android:❌ | |
| bgColor | Background color | string | iOS:❌ Android:❌ | |
| padding | Text margin | number | iOS:❌ Android:❌ | |
| textAlign | Text alignment. Valid value: left, right, center | string | iOS:❌ Android:❌ |
polyline
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| color | The color of the line | string | no | Hexadecimal | iOS:✅ Android:✅ |
| colorList | Rainbow line | array | no | Ignore when present color value | iOS:✅ Android:✅ IDE:❌ |
| width | Width of line | number | no | iOS:✅ Android:✅ | |
| dottedLine | Whether dashed lines | boolean | no | default false | iOS:❌ Android:✅ |
| arrowLine | Lines with arrows | boolean | no | default false | iOS:❌ Android:✅ |
| arrowIconPath | Replace Arrow Icon | string | no | in arrowLine for true Effective | iOS:✅ Android:✅ |
| borderColor | Border color of line | string | no | iOS:❌ Android:❌ | |
| borderWidth | Thickness of line | number | no | iOS:❌ Android:❌ | |
| level | Gland relation | string | no | Default is abovelabels | iOS:❌ Android:❌ |
polygon
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| strokeWidth | Width of stroke | number | no | iOS:✅ Android:✅ | |
| strokeColor | Stroke color | string | no | Hexadecimal | iOS:✅ Android:✅ |
| fillColor | Fill color | string | no | Hexadecimal | iOS:✅ Android:✅ |
| zIndex | Set polygon z-axis value | number | no | iOS:✅ Android:✅ | |
| level | Gland relation | string | no | Default is abovelabels | iOS:❌ Android:❌ |
circle
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| latitude | latitude | number | yes | Floating point number, range -90 90 | iOS:✅ Android:✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | iOS:✅ Android:✅ |
| color | Stroke color | string | no | Hexadecimal | iOS:✅ Android:✅ |
| fillColor | Fill color | string | no | Hexadecimal | iOS:✅ Android:✅ |
| radius | Radius | number | yes | iOS:✅ Android:✅ | |
| strokeWidth | Width of stroke | number | no | iOS:✅ Android:✅ | |
| level | Gland relation | string | no | Default is abovelabels | iOS:❌ Android:❌ |
control
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Control id | number | no | Clicking on an event callback in a control returns this id | iOS:❌ Android:❌ |
| position | Control location on the map | object | yes | Control relative map position | iOS:❌ Android:❌ |
| iconPath | Display icons | string | yes | Project directory picture path, support local path, code package path | iOS:❌ Android:❌ |
| clickable | Is it clickable? | boolean | no | Default not clickable | iOS:❌ Android:❌ |
position
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| left | How far from the left edge of the map? | number | no | Defaults to 0 | iOS:❌ Android:❌ |
| top | How far to the upper boundary of the map? | number | no | Defaults to 0 | iOS:❌ Android:❌ |
| width | Control Width | number | no | Defaults to 0 | iOS:❌ Android:❌ |
| height | Control Height | number | no | Defaults to 0 | iOS:❌ Android:❌ |
Google Maps (Android support only)
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| longitude | number | 116.46 | yes | Central longitude | ✅ |
| latitude | number | 39.92 | yes | Central latitude | ✅ |
| scale | number | 16 | no | Zoom level, values range from 3-20 | ✅ |
| min-scale | number | 3 | no | Minimum Zoom Level | ✅ |
| max-scale | number | 20 | no | Maximum zoom level | ✅ |
| markers | Array.marker | no | Marker point | ✅ | |
| polyline | Array.polyline | no | route | ✅ | |
| circles | Array.circle | no | circular | ✅ | |
| controls | Array.control | no | Control is about to be deprecated and recommended cover-view Substitute) | ❌ | |
| include-points | Array.point | no | Scale the field of view to include all the given coordinate points | ✅ | |
| show-location | boolean | false | no | Displays the current anchor point with direction | ✅ |
| polygons | Array.polygon | no | polygon | ✅ | |
| subkey | - | no | Personalized Map Configuration Style, does not support dynamic modification | ❌ | |
| layer-style | - | no | Personalized Map Configuration Style, does not support dynamic modification | ❌ | |
| rotate | number | 0 | no | Angle of rotation 0 360, Map due north and equipment and Angle of axis angle | ✅ |
| skew | number | 0 | no | Angle, range 0 40 , about with Inclination angle of shaft | ✅ |
| enable-3D | boolean | false | no | Display 3D block(Tools not supported) | ❌ |
| show-compass | boolean | false | no | Show compass | ✅ |
| show-scale | boolean | false | no | Display scale, tool does not support | ❌ |
| enable-overlooking | boolean | false | no | Open up Overlook | ✅ |
| enable-zoom | boolean | true | no | Whether scaling is supported | ✅ |
| enable-scroll | boolean | true | no | Drag supported | ✅ |
| enable-rotate | boolean | false | no | Support for rotation | ✅ |
| enable-satellite | boolean | false | no | Whether to turn on satellite imagery | ✅ |
| enable-traffic | boolean | false | no | Whether to turn on real-time traffic | ✅ |
| enable-poi | boolean | true | no | Whether to show THEN point | ✅ |
| enable-building | boolean | no | Whether to display buildings | ✅ | |
| setting | object | no | Configuration item | ✅ | |
| bindtap | eventhandle | no | Triggered when the map is clicked, Return latitude and longitude information | ✅ | |
| bindmarkertap | eventhandle | no | Triggered when the marker point is clicked, e.detail = {markerId} | ✅ | |
| bindlabeltap | eventhandle | no | Triggered when the label is clicked, e.detail = {markerId} | ❌ | |
| bindcontroltap | eventhandle | no | Triggered when the control is clicked, e.detail = {controlId} | ❌ | |
| bindcallouttap | eventhandle | no | When you click on the bubble corresponding to the marker point, e.detail = {markerId} | ✅ | |
| bindupdated | eventhandle | no | Triggered when the map render update is complete | ✅ Triggered only when map loading is complete | |
| bindregionchange | eventhandle | no | Triggered when visual field changes | ✅ | |
| bindpoitap | eventhandle | no | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | ✅ | |
| bindanchorpointtap | eventhandle | no | When the positioning mark is clicked, e.detail = {longitude, latitude} | ✅ |
marker
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Marker point id | number | no | marker Click the event callback to return this id | ✅ |
| clusterId | Aggregate cluster id | number | no | To customize the point cluster effect | ✅ |
| joinCluster | Participate in point aggregation | Boolean | no | Default does not participate in point aggregation | ✅ |
| latitude | latitude | number | yes | Floating point number, range -90 90 | ✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | ✅ |
| title | Calling-out | string | no | Shown when clicked, and ignored when callout exists | ✅ |
| zIndex | Display level | number | no | ✅ | |
| iconPath | Display icons | string | yes | Project directory under the picture path, support network path, local path, code package path | ✅ |
| rotate | Rotation angle | number | no | The angle of a clockwise rotation 0 360, default to 0 | ✅ |
| alpha | Annotated transparency | number | no | default 1, no transparency, scope 0 1 | ✅ |
| width | Label icon width | number/string | no | Default is the actual width of the picture | ✅ |
| height | Mark icon height | number | no | Default is the actual height of the picture | ✅ |
| callout | Bubble window above the marker point | Object | no | The supported properties are shown in the following table and are recognized as newlines. | ✅ |
| customCallout | Custom bubble window | object | no | ✅ | |
| label | Add labels next to marker points | Object | no | The supported properties are shown in the following table and are recognized as newlines. | ❌ |
| anchor | Latitude and longitude at anchor point of callout icon, default bottom midpoint | Object | no | {x, y}, x Represent horizontal(0-1), y Vertical(0-1). {x: .5, y: 1} Represents the midpoint of the bottom | ✅ |
| aria-label | Accessibility, additional description of (attribute) elements | string | no | ❌ |
marker Bubbles on top callout
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | ✅ | |
| color | Text color | string | ✅ | |
| fontSize | Text size | number | ✅ | |
| borderRadius | Border fillet | number | ✅ | |
| borderWidth | Border width | string | ✅ | |
| borderColor | Border color | string | ✅ | |
| bgColor | Background color | string | ✅ | |
| padding | Text margin | number | ✅ | |
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | ❌ | |
| textAlign | Text alignment. Valid value: left, right, center | string | ✅ | |
| anchorX | Lateral offset, positive to the right | number | ✅ | |
| anchorY | Vertical offset, positive downward | number | ✅ |
marker Bubbles on top customCallout
The callout and title attributes are ignored when customCallout exists. The custom bubble adopts cover-view customization, which is more flexible.
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| display | 'BYCLICK ': Click Show 'Always': Chang Hin | string | ❌ | |
| anchorX | Lateral offset, positive to the right | number | ✅ | |
| anchorY | Vertical offset, positive downward | number | ✅ |
The slot node named callout is added to the map component. Its internal cover-view is bound to the marker through the mark-id attribute. When the marker is created, the content displayed by the cover-view will be displayed as a callout above the marker point.
js
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>marker Bubbles on top label
| attribute | Introductions | type | Remarks | Support Level |
|---|---|---|---|---|
| content | text | string | ❌ | |
| color | Text color | string | ❌ | |
| fontSize | Text size | number | ❌ | |
| anchorX | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | ❌ | |
| anchorY | The coordinates of the label, the origin is marker Corresponding latitude and longitude | number | ❌ | |
| borderWidth | Border width | number | ❌ | |
| borderColor | Border color | string | ❌ | |
| borderRadius | Border fillet | number | ❌ | |
| bgColor | Background color | string | ❌ | |
| padding | Text margin | number | ❌ | |
| textAlign | Text alignment. Valid value: left, right, center | string | ❌ |
polyline
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | ✅ |
| color | The color of the line | string | no | Hexadecimal | ✅ |
| colorList | Rainbow line | array | no | Ignore when present color value | ❌ |
| width | Width of line | number | no | ✅ | |
| dottedLine | Whether dashed lines | boolean | no | default false | ❌ |
| arrowLine | Lines with arrows | boolean | no | default false | ❌ |
| arrowIconPath | Replace Arrow Icon | string | no | in arrowLine for true Effective | ❌ |
| borderColor | Border color of line | string | no | ❌ | |
| borderWidth | Thickness of line | number | no | ❌ | |
| level | Gland relation | string | no | Default is abovelabels | ❌ |
polygon
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| points | Longitude and latitude array | array | yes | [{latitude: 0, longitude: 0}] | ✅ |
| strokeWidth | Width of stroke | number | no | ✅ | |
| strokeColor | Stroke color | string | no | Hexadecimal | ✅ |
| fillColor | Fill color | string | no | Hexadecimal | ✅ |
| zIndex | Set polygon z-axis value | number | no | ✅ | |
| level | Gland relation | string | no | Default is abovelabels | ❌ |
circle
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| latitude | latitude | number | yes | Floating point number, range -90 90 | ✅ |
| longitude | longitude | number | yes | Floating point number, range -180 180 | ✅ |
| color | Stroke color | string | no | Hexadecimal | ✅ |
| fillColor | Fill color | string | no | Hexadecimal | ✅ |
| radius | Radius | number | yes | ✅ | |
| strokeWidth | Width of stroke | number | no | ✅ | |
| level | Gland relation | string | no | Default is abovelabels | ❌ |
control
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| id | Control id | number | no | Clicking on an event callback in a control returns this id | ❌ |
| position | Control location on the map | object | yes | Control relative map position | ❌ |
| iconPath | Display icons | string | yes | Project directory picture path, support local path, code package path | ❌ |
| clickable | Is it clickable? | boolean | no | Default not clickable | ❌ |
position
| attribute | Introductions | type | Required | Remarks | Support Level |
|---|---|---|---|---|---|
| left | How far from the left edge of the map? | number | no | Defaults to 0 | ❌ |
| top | How far to the upper boundary of the map? | number | no | Defaults to 0 | ❌ |
| width | Control Width | number | no | Defaults to 0 | ❌ |
| height | Control Height | number | no | Defaults to 0 | ❌ |