Map component
# System Map (iOS only)
| Properties | Type | The default value is | Required | Description | Support |
|---|---|---|---|---|---|
| longitude | number | 116.46 | Yes | Center longitude | ✅ |
| latitude | number | 39.92 | Yes | Center latitude | ✅ |
| scale | number | 16 | No | Zoom level, ranging from 3 to 20 | ✅ |
| min-scale | number | 3 | No | Minimum zoom level (this property control is not accepted when a gesture zooms in) | ✅ |
| max-scale | number | 20 | No | The maximum zoom level (this property control is not accepted when the gesture zooms in) | ✅ |
| markers | Array.marker | No | Mark point | ✅ | |
| polyline | Array.polyline | No | Route | ✅ | |
| circles | Array.circle | No | Circle | ✅ | |
| controls | Array.control | No | Controls (soon to be deprecated, it is recommended to use cover-view instead) | ❌ | |
| include-points | Array.point | No | Scales the field of view to include all given coordinate points | ✅ | |
| show-location | boolean | false | No | Displays the current anchor | with orientation ✅ |
| polygons | Array.polygon | No | Polygon | ✅ | |
| subkey | - | No | Personalized maps do not support | at this time ❌ | |
| layer-style | - | No | Personalized maps do not support | at this time ❌ | |
| rotate | number | 0 | No | Rotation angle, range 0 to 360, angle of true north of the map and y-axis angle of the device | ❌ |
| skew | number | 0 | No | Tilt angle, ranging from 0 to 40, inclination angle | about the z-axis ❌ |
| enable-3D | boolean | false | No | Showcasing the | of a 3D block ✅ |
| show-compass | boolean | false | No | Displays the Compass | ✅ |
| show-scale | boolean | false | No | Displays the scale bar | ✅ |
| enable-overlooking | boolean | false | No | Turn on the Top Down | ❌ |
| enable-zoom | boolean | true | No | Whether the Zoom | is supported ✅ |
| enable-scroll | boolean | true | No | Whether dragging | is supported ✅ |
| enable-rotate | boolean | false | No | Whether rotation | is supported ✅ |
| enable-satellite | boolean | false | No | Whether to turn on satellite image | ✅ |
| enable-traffic | boolean | false | No | Whether to turn on the Real-time Traffic | ✅ |
| enable-poi | boolean | true | No | Whether to display the POI point | ✅ |
| enable-building | boolean | No | Whether to display the building | ✅ | |
| setting | object | No | When the setting content of a configuration item conflicts with the configuration of a property, the setting | ✅ | |
| bindtap | eventhandle | No | Triggered when the map is clicked, the latitude and longitude information is returned | ❌ | |
| 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 a control is clicked, e.detail = {controlId} | ❌ | |
| bindcallouttap | eventhandle | No | Clicking on the bubble corresponding to the marker triggers the e.detail = {markerId} | ❌ | |
| bindupdated | eventhandle | No | Triggers the | when the map rendering update is complete ❌ | |
| bindregionchange | eventhandle | No | Triggers the | when the field of view changes ✅ | |
| bindpoitap | eventhandle | No | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | ❌ | |
| bindanchorpointtap | eventhandle | No | Triggered when the target is clicked, e.detail = {longitude, latitude} | ❌ |
# marker
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | The point id | number | No | The marker click event callback returns this id. | ✅ |
| clusterId | The id of the aggregation cluster | number | No | Use | when customizing the point aggregation cluster effect ✅ |
| joinCluster | Whether to participate in the point aggregation | Boolean | No | By default, point aggregation | are not involved ❌ |
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | ✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | ✅ |
| title | Label roll call | string | No | Displayed when clicked, callout is ignored when present | ✅ |
| zIndex | Displays the Hierarchy | number | No | ❌ | |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support network paths, local paths, code package paths, | ✅ |
| rotate | Rotation angle | number | No | Clockwise rotated angle, ranging from 0 to 360, defaults to 0 | ❌ |
| alpha | Transparency of labels | number | No | Default 1, no transparency, range 0 to 1 | ❌ |
| width | Label icon width | number/string | No | The default is | actual width of the picture ❌ |
| height | Mark point | number | No | The default is the actual height of the picture | ❌ |
| callout | The bubble window above the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | ✅ |
| customCallout | Mark point | object | No | ❌ | |
| label | Add a label next to the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | ❌ |
| anchor | Latitude and longitude are anchor points in the label icon, and the default bottom edge midpoint | Object | No | {x, y}, x for landscape (0-1) and y for vertical (0-1). {x: .5, y: 1} represents the bottom edge midpoint | ❌ |
| aria-label | Accessibility, an additional description of the (attribute) element | string | No | ❌ |
# marker on the bubble callout
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| content | Text | string | ✅ | |
| color | Text color | string | ❌ | |
| fontSize | Text size | number | ❌ | |
| borderRadius | Border rounded corners | number | ❌ | |
| borderWidth | Border width | string | ❌ | |
| borderColor | Border color | string | ❌ | |
| bgColor | Background color | string | ❌ | |
| padding | Blank text edges | number | ❌ | |
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | ❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | ❌ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | ❌ | |
| anchorY | A longitudinal offset, down to a positive number of | number | ❌ |
# the bubble on the marker customCallout
The callout and title attributes are ignored when customCallout exists. Custom bubbles are customized with cover-view for greater flexibility.
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | ❌ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | ❌ | |
| anchorY | A longitudinal offset, down to a positive number of | number | ❌ |
To use it, add a slot node named callout under the map component, and its internal cover-view is bound to the marker through the marker-id property. When the marker is created, the cover-view displays content above the marker point as a callout.
# marker on the bubble label
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| content | Text | string | ✅ | |
| color | Text color | string | ❌ | |
| fontSize | Text size | number | ❌ | |
| anchorX | The coordinates of the label, the origin is the latitude and longitude corresponding to the marker | number | ❌ | |
| anchorY | The coordinates of the label, the origin is the latitude and longitude corresponding to the marker | number | ❌ | |
| borderWidth | Border width | number | ❌ | |
| borderColor | Border color | string | ❌ | |
| borderRadius | Border rounded corners | number | ❌ | |
| bgColor | Background color | string | ❌ | |
| padding | Blank text edges | number | ❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | ❌ |
# polyline
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | ✅ |
| color | The color of the line | string | No | Hexadecimal | ✅ |
| colorList | Rainbow Line | array | No | The color value | is ignored when present ❌ |
| width | The width of the line | number | No | ✅ | |
| dottedLine | Whether the dotted line | boolean | No | The default false | ❌ |
| arrowLine | Line with arrows | boolean | No | The default false | ❌ |
| arrowIconPath | Replace the arrow icon | string | No | in effect when arrowLine is true ❌ | |
| borderColor | The border color of the line is | string | No | ❌ | |
| borderWidth | The thickness of the line is | number | No | ❌ | |
| level | Gland relationship | string | No | The default is the abovelabels | ❌ |
# polygon
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | ✅ |
| strokeWidth | The width of the stroke | number | No | ✅ | |
| strokeColor | The color of the stroke | string | No | Hexadecimal | ✅ |
| fillColor | Fill color | string | No | Hexadecimal | ✅ |
| zIndex | Sets the polygon Z-axis value | number | No | ✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | ❌ |
# circle
| Properties | Description | Type | Required | Note | Other |
|---|---|---|---|---|---|
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | ✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | ✅ |
| color | The color of the stroke | string | No | Hexadecimal | ✅ |
| fillColor | Fill color | string | No | Hexadecimal | ✅ |
| radius | Radius | number | Yes | ✅ | |
| strokeWidth | The width of the stroke | number | No | ✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | ❌ |
# control
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | Control ID | number | No | The control click event callback returns this ID | ❌ |
| position | The location of the control | map object | Yes | The control | relative to the map location ❌ |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support local paths, code package paths, | ❌ |
| clickable | Click | boolean | No | By default, | is not clickable ❌ |
# position
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| left | How far away from the left border of the map is | number | No | The default is 0 | ❌ |
| top | How far away from the upper boundary of the map is | number | No | The default is 0 | ❌ |
| width | Control width | number | No | The default is 0 | ❌ |
| height | Control height | number | No | The default is 0 | ❌ |
# AutoNavi Map
| Properties | Type | The default value is | Required | Description | Support |
|---|---|---|---|---|---|
| longitude | number | 116.46 | Yes | Center longitude | iOS:✅ Android:✅ IDE:✅ |
| latitude | number | 39.92 | Yes | Center latitude | iOS:✅ Android:✅ IDE:✅ |
| scale | number | 16 | No | Zoom level, ranging from 3 to 20 | iOS:✅ Android:✅ IDE:✅ |
| min-scale | number | 3 | No | Minimum zoom level | iOS: ✅ Android: IDE: ✅ ✅ Dynamic modification of |
| max-scale | number | 20 | No | Maximum zoom level | iOS: ✅ Android: IDE: ✅ ✅ Dynamic modification of |
| markers | Array.marker | No | Mark point | iOS:✅ Android:✅ IDE:✅ | |
| polyline | Array.polyline | No | Route | iOS:✅ Android:✅ IDE:✅ | |
| circles | Array.circle | No | Circle | iOS:✅ Android:✅ IDE:✅ | |
| controls | Array.control | No | Controls (soon to be deprecated, it is recommended to use cover-view instead) | iOS:❌ Android:❌ IDE:✅ | |
| include-points | Array.point | No | Scales the field of view to include all given coordinate points | iOS:✅ Android:✅ IDE:❌ | |
| show-location | boolean | false | No | Displays the current anchor | with orientation iOS:✅ Android:✅ IDE:❌ |
| polygons | Array.polygon | No | Polygon | iOS:✅ Android:✅ IDE:✅ | |
| subkey | - | No | Personalized maps do not support | at this time iOS:❌ Android:❌ IDE:❌ | |
| layer-style | - | No | Personalized maps do not support | at this time iOS:❌ Android:❌ IDE:❌ | |
| rotate | number | 0 | No | Rotation angle, range 0 to 360, angle of true north of the map and y-axis angle of the device | iOS:✅ Android:✅ IDE:✅ |
| skew | number | 0 | No | Tilt angle, ranging from 0 to 40, inclination angle | about the z-axis iOS:✅ Android:✅ IDE:✅ |
| enable-3D | boolean | false | No | Showcasing the | of a 3D block iOS:❌ Android:❌ IDE:❌ |
| show-compass | boolean | false | No | Displays the Compass | iOS:✅ Android:✅ IDE:❌ |
| show-scale | boolean | false | No | Displays the scale bar | iOS:✅ Android:✅ IDE:✅ |
| enable-overlooking | boolean | false | No | Turn on the Top Down | iOS:✅ Android:✅ IDE:❌ |
| enable-zoom | boolean | true | No | Whether the Zoom | is supported iOS:✅ Android:✅ IDE:✅ |
| enable-scroll | boolean | true | No | Whether dragging | is supported iOS:✅ Android:✅ IDE:✅ |
| enable-rotate | boolean | false | No | Whether rotation | is supported iOS:✅ Android:✅ IDE:✅ |
| enable-satellite | boolean | false | No | Whether to turn on satellite image | iOS:✅ Android:✅ IDE:✅ |
| enable-traffic | boolean | false | No | Whether to turn on the Real-time Traffic | iOS:✅ Android:✅ IDE:✅ |
| enable-poi | boolean | true | No | Whether to display POI points (iOS is on by default, not turned off) | iOS:✅ Android:✅ IDE:✅ |
| enable-building | boolean | No | Whether to display the building | iOS:✅ Android:✅ IDE:✅ | |
| setting | object | No | When the setting content of a configuration item conflicts with the configuration of a property, the setting | iOS:✅ Android:✅ IDE:✅ | |
| bindtap | eventhandle | No | Triggered when the map is clicked, the latitude and longitude information is returned | iOS:✅ Android:✅ IDE:✅ | |
| bindmarkertap | eventhandle | No | Triggered when the marker point is clicked, e.detail = {markerId} | iOS:✅ Android:✅ IDE:✅ | |
| bindlabeltap | eventhandle | No | Triggered when the label is clicked, e.detail = {markerId} | iOS:❌ Android:❌ IDE:❌ | |
| bindcontroltap | eventhandle | No | Triggered when a control is clicked, e.detail = {controlId} | iOS:❌ Android:❌ IDE:✅ | |
| bindcallouttap | eventhandle | No | Clicking on the bubble corresponding to the marker triggers the e.detail = {markerId} | iOS:✅ Android:✅ IDE:❌ | |
| bindupdated | eventhandle | No | Triggers the | when the map rendering update is complete iOS: ✅ Trigger only when map load is complete Android: ✅ IDE: ❌ | |
| bindregionchange | eventhandle | No | Triggers the | when the field of view 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 | Triggered when the target is clicked, e.detail = {longitude, latitude} | iOS:✅ Android:✅ IDE:❌ |
# marker
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | The point id | number | No | The marker click event callback returns this id. | iOS:✅ Android:✅ IDE:✅ |
| clusterId | The id of the aggregation cluster | number | No | Use | when customizing the point aggregation cluster effect iOS:❌ Android:✅ IDE:❌ |
| joinCluster | Whether to participate in the point aggregation | Boolean | No | By default, point aggregation | are not involved iOS:❌ Android:✅ IDE:❌ |
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | iOS:✅ Android:✅ IDE:✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | iOS:✅ Android:✅ IDE:✅ |
| title | Label roll call | string | No | Displayed when clicked, callout is ignored when present | iOS:✅ Android:✅ IDE:✅ |
| zIndex | Displays the Hierarchy | number | No | iOS:✅Android:✅ IDE:✅ | |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support network paths, local paths, code package paths, | iOS:✅ Android:✅ IDE:✅ |
| rotate | Rotation angle | number | No | Clockwise rotated angle, ranging from 0 to 360, defaults to 0 | iOS:❌ Android:✅ IDE:✅ |
| alpha | Transparency of labels | number | No | Default 1, no transparency, range 0 to 1 | iOS:❌ Android:✅ IDE:✅ |
| width | Label icon width | number/string | No | The default is | actual width of the picture iOS:✅ Android:✅ IDE:✅ |
| height | Mark point | number | No | The default is the actual height of the picture | iOS:✅ Android:✅ IDE:✅ |
| callout | The bubble window above the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | iOS:✅ Android:✅ IDE:✅ |
| customCallout | Mark point | number | No | iOS:✅ Android:✅ IDE:❌ | |
| label | Add a label next to the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | iOS:❌ Android:❌ IDE:✅ |
| anchor | Latitude and longitude are anchor points in the label icon, and the default bottom edge midpoint | Object | No | {x, y}, x for landscape (0-1) and y for vertical (0-1). {x: .5, y: 1} represents the bottom edge midpoint | iOS:❌ Android:✅ IDE:✅ |
| aria-label | Accessibility, an additional description of the (attribute) element | string | No | iOS:❌ Android:❌ IDE:❌ |
# marker on the bubble callout
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| content | Text | string | iOS:✅ Android:✅ IDE:✅ | |
| color | Text color | string | iOS:✅ Android:✅ IDE:❌ | |
| fontSize | Text size | number | iOS:✅ Android:✅ IDE:❌ | |
| borderRadius | Border rounded corners | 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 | Blank text edges | number | iOS:❌ Android:✅ IDE:❌ | |
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | iOS:❌ Android:❌ IDE:❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | iOS:✅ Android:✅ IDE:❌ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | iOS:✅ Android:✅ IDE:❌ | |
| anchorY | A longitudinal offset, down to a positive number of | number | iOS:✅ Android:✅ IDE:❌ |
# the bubble on the marker customCallout
The callout and title attributes are ignored when customCallout exists. Custom bubbles are customized with cover-view for greater flexibility.
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | iOS:❌ Android:❌ IDE:❌ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | iOS:✅ Android:✅ IDE:❌ | |
| anchorY | A longitudinal offset, down to a positive number of | number | iOS:✅ Android:✅ IDE:❌ |
To use it, add a slot node named callout under the map component, and its internal cover-view is bound to the marker through the marker-id property. When the marker is created, the cover-view displays content above the marker point as a callout.
# marker on the bubble label
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| 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 the latitude and longitude corresponding to the marker | number | iOS:❌ Android:❌ IDE:❌ | |
| anchorY | The coordinates of the label, the origin is the latitude and longitude corresponding to the marker | number | iOS:❌ Android:❌ IDE:❌ | |
| borderWidth | Border width | number | iOS:❌ Android:❌ IDE:❌ | |
| borderColor | Border color | string | iOS:❌ Android:❌ IDE:❌ | |
| borderRadius | Border rounded corners | number | iOS:❌ Android:❌ IDE:❌ | |
| bgColor | Background color | string | iOS:❌ Android:❌ IDE:❌ | |
| padding | Blank text edges | number | iOS:❌ Android:❌ IDE:❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | iOS:❌ Android:❌ IDE:❌ |
# polyline
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ IDE:✅ |
| color | The color of the line | string | No | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| colorList | Rainbow Line | array | No | The color value | is ignored when present iOS:❌ Android:✅ IDE:❌ |
| width | The width of the line | number | No | iOS:✅ Android:✅ IDE:✅ | |
| dottedLine | Whether the dotted line | boolean | No | The default false | iOS:❌ Android:✅ IDE:✅ |
| arrowLine | Line with arrows | boolean | No | The default false | iOS:❌ Android:✅ IDE:✅ |
| arrowIconPath | Replace the arrow icon | string | No | in effect when arrowLine is true iOS:✅ Android:✅ IDE:✅ | |
| borderColor | The border color of the line is | string | No | iOS:❌ Android:❌ IDE:✅ | |
| borderWidth | The thickness of the line is | number | No | iOS:❌ Android:❌ IDE:✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | iOS:❌ |
Android: ✅ aboveroads is equivalent to abovebuildings
IDE:✅ |
# polygon
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ IDE:✅ |
| strokeWidth | The width of the stroke | number | No | iOS:✅ Android:✅ IDE:✅ | |
| strokeColor | The color of the stroke | string | No | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| fillColor | Fill color | string | No | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| zIndex | Sets the polygon Z-axis value | number | No | iOS:✅ Android:✅ IDE:✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | iOS:❌ |
Android: ✅ aboveroads is equivalent to abovebuildings
IDE:✅ |
# circle
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | iOS:✅ Android:✅ IDE:✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | iOS:✅ Android:✅ IDE:✅ |
| color | The color of the stroke | string | No | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| fillColor | Fill color | string | No | Hexadecimal | iOS:✅ Android:✅ IDE:✅ |
| radius | Radius | number | Yes | iOS:✅ Android:✅ IDE:✅ | |
| strokeWidth | The width of the stroke | number | No | iOS:✅ Android:✅ IDE:✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | iOS:❌ |
Android: ✅ aboveroads is equivalent to abovebuildings
IDE:✅ |
# control
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | Control ID | number | No | The control click event callback returns this ID | iOS:❌ Android:❌ IDE:✅ |
| position | The location of the control | map object | Yes | The control | relative to the map location iOS:❌ Android:❌ IDE:✅ |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support local paths, code package paths, | iOS:❌ Android:❌ IDE:✅ |
| clickable | Click | boolean | No | By default, | is not clickable iOS:❌ Android:❌ IDE:✅ |
# position
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| left | How far away from the left border of the map is | number | No | The default is 0 | iOS:❌ Android:❌ IDE:✅ |
| top | How far away from the upper boundary of the map is | number | No | The default is 0 | iOS:❌ Android:❌ IDE:✅ |
| width | Control width | number | No | The default is 0 | iOS:❌ Android:❌ IDE:✅ |
| height | Control height | number | No | The default is 0 | iOS:❌ Android:❌ IDE:✅ |
# Baidu Maps (iOS, Android support only)
| Properties | Type | The default value is | Required | Description | Support |
|---|---|---|---|---|---|
| longitude | number | 116.46 | Yes | Center longitude | iOS:✅ Android:✅ |
| latitude | number | 39.92 | Yes | Center latitude | iOS:✅ Android:✅ |
| scale | number | 16 | No | Zoom level, ranging from 3 to 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 | Mark point | iOS:✅ Android:✅ | |
| polyline | Array.polyline | No | Route | iOS:✅ Android:✅ | |
| circles | Array.circle | No | Circle | iOS:✅ Android:✅ | |
| controls | Array.control | No | Controls (soon to be deprecated, it is recommended to use cover-view instead) | iOS:❌ Android:❌ | |
| include-points | Array.point | No | Scales the field of view to include all given coordinate points | iOS:✅ Android:✅ | |
| show-location | boolean | false | No | Displays the current anchor | with orientation iOS:✅ Android:✅ |
| polygons | Array.polygon | No | Polygon | iOS:✅ Android:✅ | |
| subkey | - | No | Personalized maps do not support | at this time iOS:❌ Android:❌ | |
| layer-style | - | No | Personalized maps do not support | at this time iOS:❌ Android:❌ | |
| rotate | number | 0 | No | Rotation angle, range 0 to 360, angle of true north of the map and y-axis angle of the device | iOS:✅ Android:✅ |
| skew | number | 0 | No | Tilt angle, ranging from 0 to 40, inclination angle | about the z-axis iOS:✅ Android:✅ |
| enable-3D | boolean | false | No | Showcasing the | of a 3D block iOS:✅ Android:✅ |
| show-compass | boolean | false | No | Shows the compass (iOS is on by default, not turned off) | iOS:✅ Android:✅ |
| show-scale | boolean | false | No | Displays the scale bar | iOS:✅ Android:✅ |
| enable-overlooking | boolean | false | No | Turn on the Top Down | iOS:✅ Android:✅ |
| enable-zoom | boolean | true | No | Whether the Zoom | is supported iOS:✅ Android:✅ |
| enable-scroll | boolean | true | No | Whether dragging | is supported iOS:✅ Android:✅ |
| enable-rotate | boolean | false | No | Whether rotation | is supported iOS:✅ Android:✅ |
| enable-satellite | boolean | false | No | Whether to turn on satellite image | iOS:✅ Android:✅ |
| enable-traffic | boolean | false | No | Whether to turn on the Real-time Traffic | iOS:✅ Android:✅ |
| enable-poi | boolean | true | No | Whether to display the POI point | iOS:✅ Android:✅ |
| enable-building | boolean | No | Whether to display the building | iOS:❌ Android:❌ | |
| setting | object | No | When the setting content of a configuration item conflicts with the configuration of a property, the setting | iOS:✅ Android:✅ | |
| bindtap | eventhandle | No | Triggered when the map is clicked, the latitude and longitude information is returned | 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 a control is clicked, e.detail = {controlId} | iOS:❌ Android:❌ | |
| bindcallouttap | eventhandle | No | Clicking on the bubble corresponding to the marker triggers the e.detail = {markerId} | iOS:✅ Android:✅ | |
| bindupdated | eventhandle | No | Triggers the | when the map rendering update is complete iOS: ✅ Trigger only when map load is complete Android: ✅ Trigger | |
| bindregionchange | eventhandle | No | Triggers the | when the field of view changes iOS:✅ Android:✅ | |
| bindpoitap | eventhandle | No | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | iOS:✅ Android:✅ | |
| bindanchorpointtap | eventhandle | No | Triggered when the target is clicked, e.detail = {longitude, latitude} | iOS:✅ Android:✅ |
# marker
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | The point id | number | No | The marker click event callback returns this id. | iOS:✅ Android:✅ |
| clusterId | The id of the aggregation cluster | number | No | Use | when customizing the point aggregation cluster effect iOS:✅ Android:✅ |
| joinCluster | Whether to participate in the point aggregation | Boolean | No | By default, point aggregation | are not involved iOS:❌ Android:✅ |
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | iOS:✅ Android:✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | iOS:✅ Android:✅ |
| title | Label roll call | string | No | Displayed when clicked, callout is ignored when present | iOS:✅ Android:✅ |
| zIndex | Displays the Hierarchy | number | No | iOS:✅ Android:✅ | |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support network paths, local paths, code package paths, | iOS:✅ Android:✅ |
| rotate | Rotation angle | number | No | Clockwise rotated angle, ranging from 0 to 360, defaults to 0 | iOS:❌ Android:✅ |
| alpha | Transparency of labels | number | No | Default 1, no transparency, range 0 to 1 | iOS:❌ Android:✅ |
| width | Label icon width | number/string | No | The default is | actual width of the picture iOS:✅ Android:✅ |
| height | Mark point | number | No | The default is the actual height of the picture | iOS:✅ Android:✅ |
| callout | The bubble window above the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | iOS:✅ Android:✅ |
| customCallout | Mark point | object | No | iOS:✅ Android:✅ | |
| label | Add a label next to the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | iOS:❌ Android:❌ |
| anchor | Latitude and longitude are anchor points in the label icon, and the default bottom edge midpoint | Object | No | {x, y}, x for landscape (0-1) and y for vertical (0-1). {x: .5, y: 1} represents the bottom edge midpoint | iOS:✅ Android:✅ |
| aria-label | Accessibility, an additional description of the (attribute) element | string | No | iOS:❌ Android:❌ |
# marker on the bubble callout
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| content | Text | string | iOS:✅ Android:✅ | |
| color | Text color | string | iOS:✅ Android:✅ | |
| fontSize | Text size | number | iOS:✅ Android:✅ | |
| borderRadius | Border rounded corners | number | iOS:✅ Android:✅ | |
| borderWidth | Border width | string | iOS:✅ Android:✅ | |
| borderColor | Border color | string | iOS:✅ Android:✅ | |
| bgColor | Background color | string | iOS:✅ Android:✅ | |
| padding | Blank text edges | number | iOS:✅ Android:✅ | |
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | iOS:❌ Android:✅ | |
| textAlign | Text alignment. Valid values: left, right, center | string | iOS:✅ Android:✅ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | iOS:✅ Android:❌ | |
| anchorY | A longitudinal offset, down to a positive number of | number | iOS:✅ Android:✅ |
# the bubble on the marker customCallout
The callout and title attributes are ignored when customCallout exists. Custom bubbles are customized with cover-view for greater flexibility.
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | iOS:❌ Android:✅ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | iOS:✅ Android:✅ | |
| anchorY | A longitudinal offset, down to a positive number of | number | iOS:✅ Android:✅ |
To use it, add a slot node named callout under the map component, and its internal cover-view is bound to the marker through the marker-id property. When the marker is created, the cover-view displays content above the marker point as a callout.
# marker on the bubble label
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| 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 the latitude and longitude corresponding to the marker | number | iOS:❌ Android:❌ | |
| anchorY | The coordinates of the label, the origin is the latitude and longitude corresponding to the marker | number | iOS:❌ Android:❌ | |
| borderWidth | Border width | number | iOS:❌ Android:❌ | |
| borderColor | Border color | string | iOS:❌ Android:❌ | |
| borderRadius | Border rounded corners | number | iOS:❌ Android:❌ | |
| bgColor | Background color | string | iOS:❌ Android:❌ | |
| padding | Blank text edges | number | iOS:❌ Android:❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | iOS:❌ Android:❌ |
# polyline
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude 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 | The color value | is ignored when present iOS:✅ Android:✅ IDE:❌ |
| width | The width of the line | number | No | iOS:✅ Android:✅ | |
| dottedLine | Whether the dotted line | boolean | No | The default false | iOS:❌ Android:✅ |
| arrowLine | Line with arrows | boolean | No | The default false | iOS:❌ Android:✅ |
| arrowIconPath | Replace the arrow icon | string | No | in effect when arrowLine is true iOS:✅ Android:✅ | |
| borderColor | The border color of the line is | string | No | iOS:❌ Android:❌ | |
| borderWidth | The thickness of the line is | number | No | iOS:❌ Android:❌ | |
| level | Gland relationship | string | No | The default is the abovelabels | iOS:❌ Android:❌ |
# polygon
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| strokeWidth | The width of the stroke | number | No | iOS:✅ Android:✅ | |
| strokeColor | The color of the stroke | string | No | Hexadecimal | iOS:✅ Android:✅ |
| fillColor | Fill color | string | No | Hexadecimal | iOS:✅ Android:✅ |
| zIndex | Sets the polygon Z-axis value | number | No | iOS:✅ Android:✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | iOS:❌ Android:❌ |
# circle
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | iOS:✅ Android:✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | iOS:✅ Android:✅ |
| color | The color of the stroke | string | No | Hexadecimal | iOS:✅ Android:✅ |
| fillColor | Fill color | string | No | Hexadecimal | iOS:✅ Android:✅ |
| radius | Radius | number | Yes | iOS:✅ Android:✅ | |
| strokeWidth | The width of the stroke | number | No | iOS:✅ Android:✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | iOS:❌ Android:❌ |
# control
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | Control ID | number | No | The control click event callback returns this ID | iOS:❌ Android:❌ |
| position | The location of the control | map object | Yes | The control | relative to the map location iOS:❌ Android:❌ |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support local paths, code package paths, | iOS:❌ Android:❌ |
| clickable | Click | boolean | No | By default, | is not clickable iOS:❌ Android:❌ |
# position
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| left | How far away from the left border of the map is | number | No | The default is 0 | iOS:❌ Android:❌ |
| top | How far away from the upper boundary of the map is | number | No | The default is 0 | iOS:❌ Android:❌ |
| width | Control width | number | No | The default is 0 | iOS:❌ Android:❌ |
| height | Control height | number | No | The default is 0 | iOS:❌ Android:❌ |
# Google Maps (Android only)
| Properties | Type | The default value is | Required | Description | Support |
|---|---|---|---|---|---|
| longitude | number | 116.46 | Yes | Center longitude | ✅ |
| latitude | number | 39.92 | Yes | Center latitude | ✅ |
| scale | number | 16 | No | Zoom level, ranging from 3 to 20 | ✅ |
| min-scale | number | 3 | No | Minimum zoom level | ✅ |
| max-scale | number | 20 | No | Maximum zoom level | ✅ |
| markers | Array.marker | No | Mark point | ✅ | |
| polyline | Array.polyline | No | Route | ✅ | |
| circles | Array.circle | No | Circle | ✅ | |
| controls | Array.control | No | Controls (soon to be deprecated, it is recommended to use cover-view instead) | ❌ | |
| include-points | Array.point | No | Scales the field of view to include all given coordinate points | ✅ | |
| show-location | boolean | false | No | Displays the current anchor | with orientation ✅ |
| polygons | Array.polygon | No | Polygon | ✅ | |
| subkey | - | No | Personalized maps do not support | at this time ❌ | |
| layer-style | - | No | Personalized maps do not support | at this time ❌ | |
| rotate | number | 0 | No | Rotation angle, range 0 to 360, angle of true north of the map and y-axis angle of the device | ✅ |
| skew | number | 0 | No | Tilt angle, ranging from 0 to 40, inclination angle | about the z-axis ✅ |
| enable-3D | boolean | false | No | Showcasing the | of a 3D block ❌ |
| show-compass | boolean | false | No | Displays the Compass | ✅ |
| show-scale | boolean | false | No | Displays the scale bar | ❌ |
| enable-overlooking | boolean | false | No | Turn on the Top Down | ✅ |
| enable-zoom | boolean | true | No | Whether the Zoom | is supported ✅ |
| enable-scroll | boolean | true | No | Whether dragging | is supported ✅ |
| enable-rotate | boolean | false | No | Whether rotation | is supported ✅ |
| enable-satellite | boolean | false | No | Whether to turn on satellite image | ✅ |
| enable-traffic | boolean | false | No | Whether to turn on the Real-time Traffic | ✅ |
| enable-poi | boolean | true | No | Whether to display the POI point | ✅ |
| enable-building | boolean | No | Whether to display the building | ✅ | |
| setting | object | No | When the setting content of a configuration item conflicts with the configuration of a property, the setting | ✅ | |
| bindtap | eventhandle | No | Triggered when the map is clicked, the latitude and longitude information is returned | ✅ | |
| 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 a control is clicked, e.detail = {controlId} | ❌ | |
| bindcallouttap | eventhandle | No | Clicking on the bubble corresponding to the marker triggers the e.detail = {markerId} | ✅ | |
| bindupdated | eventhandle | No | Triggers the | when the map rendering update is complete ✅ The | |
| bindregionchange | eventhandle | No | Triggers the | when the field of view changes ✅ | |
| bindpoitap | eventhandle | No | Triggered when the map poi point is clicked, e.detail = {name, longitude, latitude} | ✅ | |
| bindanchorpointtap | eventhandle | No | Triggered when the target is clicked, e.detail = {longitude, latitude} | ✅ |
# marker
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | The point id | number | No | The marker click event callback returns this id. | ✅ |
| clusterId | The id of the aggregation cluster | number | No | Use | when customizing the point aggregation cluster effect ✅ |
| joinCluster | Whether to participate in the point aggregation | Boolean | No | By default, point aggregation | are not involved ✅ |
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | ✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | ✅ |
| title | Label roll call | string | No | Displayed when clicked, callout is ignored when present | ✅ |
| zIndex | Displays the Hierarchy | number | No | ✅ | |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support network paths, local paths, code package paths, | ✅ |
| rotate | Rotation angle | number | No | Clockwise rotated angle, ranging from 0 to 360, defaults to 0 | ✅ |
| alpha | Transparency of labels | number | No | Default 1, no transparency, range 0 to 1 | ✅ |
| width | Label icon width | number/string | No | The default is | actual width of the picture ✅ |
| height | Mark point | number | No | The default is the actual height of the picture | ✅ |
| callout | The bubble window above the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | ✅ |
| customCallout | Mark point | object | No | ✅ | |
| label | Add a label next to the marker point | Object | No | The supported properties are shown in the following table to identify line breaks. | ❌ |
| anchor | Latitude and longitude are anchor points in the label icon, and the default bottom edge midpoint | Object | No | {x, y}, x for landscape (0-1) and y for vertical (0-1). {x: .5, y: 1} represents the bottom edge midpoint | ✅ |
| aria-label | Accessibility, an additional description of the (attribute) element | string | No | ❌ |
# marker on the bubble callout
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| content | Text | string | ✅ | |
| color | Text color | string | ✅ | |
| fontSize | Text size | number | ✅ | |
| borderRadius | Border rounded corners | number | ✅ | |
| borderWidth | Border width | string | ✅ | |
| borderColor | Border color | string | ✅ | |
| bgColor | Background color | string | ✅ | |
| padding | Blank text edges | number | ✅ | |
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | ❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | ✅ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | ✅ | |
| anchorY | A longitudinal offset, down to a positive number of | number | ✅ |
# the bubble on the marker customCallout
The callout and title attributes are ignored when customCallout exists. Custom bubbles are customized with cover-view for greater flexibility.
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| display | 'BYCLICK': Click show; 'ALWAYS': Always | string | ❌ | |
| anchorX | The horizontal offset, to the right, is a positive number | number | ✅ | |
| anchorY | A longitudinal offset, down to a positive number of | number | ✅ |
To use it, add a slot node named callout under the map component, and its internal cover-view is bound to the marker through the marker-id property. When the marker is created, the cover-view displays content above the marker point as a callout.
# marker on the bubble label
| Properties | Description | Type | Note | Support |
|---|---|---|---|---|
| content | Text | string | ❌ | |
| color | Text color | string | ❌ | |
| fontSize | Text size | number | ❌ | |
| anchorX | The coordinates of the label, the origin is the latitude and longitude corresponding to the marker | number | ❌ | |
| anchorY | The coordinates of the label, the origin is the latitude and longitude corresponding to the marker | number | ❌ | |
| borderWidth | Border width | number | ❌ | |
| borderColor | Border color | string | ❌ | |
| borderRadius | Border rounded corners | number | ❌ | |
| bgColor | Background color | string | ❌ | |
| padding | Blank text edges | number | ❌ | |
| textAlign | Text alignment. Valid values: left, right, center | string | ❌ |
# polyline
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | ✅ |
| color | The color of the line | string | No | Hexadecimal | ✅ |
| colorList | Rainbow Line | array | No | The color value | is ignored when present ❌ |
| width | The width of the line | number | No | ✅ | |
| dottedLine | Whether the dotted line | boolean | No | The default false | ❌ |
| arrowLine | Line with arrows | boolean | No | The default false | ❌ |
| arrowIconPath | Replace the arrow icon | string | No | in effect when arrowLine is true ❌ | |
| borderColor | The border color of the line is | string | No | ❌ | |
| borderWidth | The thickness of the line is | number | No | ❌ | |
| level | Gland relationship | string | No | The default is the abovelabels | ❌ |
# polygon
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| points | Latitude and longitude array | array | Yes | [{latitude: 0, longitude: 0}] | ✅ |
| strokeWidth | The width of the stroke | number | No | ✅ | |
| strokeColor | The color of the stroke | string | No | Hexadecimal | ✅ |
| fillColor | Fill color | string | No | Hexadecimal | ✅ |
| zIndex | Sets the polygon Z-axis value | number | No | ✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | ❌ |
# circle
| Properties | Description | Type | Required | Note | Other |
|---|---|---|---|---|---|
| latitude | Latitude | number | Yes | Floating-point number, ranging from -90 to 90 | ✅ |
| longitude | Longitude | number | Yes | Floating-point number, ranging from -180 to 180 | ✅ |
| color | The color of the stroke | string | No | Hexadecimal | ✅ |
| fillColor | Fill color | string | No | Hexadecimal | ✅ |
| radius | Radius | number | Yes | ✅ | |
| strokeWidth | The width of the stroke | number | No | ✅ | |
| level | Gland relationship | string | No | The default is the abovelabels | ❌ |
# control
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| id | Control ID | number | No | The control click event callback returns this ID | ❌ |
| position | The location of the control | map object | Yes | The control | relative to the map location ❌ |
| iconPath | The icon displayed is | string | Yes | Image paths in the project directory, support local paths, code package paths, | ❌ |
| clickable | Click | boolean | No | By default, | is not clickable ❌ |
# position
| Properties | Description | Type | Required | Note | Support |
|---|---|---|---|---|---|
| left | How far away from the left border of the map is | number | No | The default is 0 | ❌ |
| top | How far away from the upper boundary of the map is | number | No | The default is 0 | ❌ |
| width | Control width | number | No | The default is 0 | ❌ |
| height | Control height | number | No | The default is 0 | ❌ |
Last update: 2022/08/11, 20:42:12