map
Support:
System map: Supported only on iOS.
Google Maps: Supported on Android and in IDE.
Huawei Maps: Supported only on Android.
Tencent Maps: Supported on iOS, Android, and in IDE.
Parameter and description:
|
type | string | tencent | False | Map type, either Tencent or Google. | False | False | True |
|
|
longitude | number | - | True | Center longitude. | True | True | True |
|
|
latitude | number | - | True | Center latitude. | True | True | True |
|
|
scale | number | 16 | False | Zoom level. Value range: 3-20. | True | True | True |
|
|
min-scale | number | 3 | False | Minimum zoom level. |
| True | True |
|
|
max-scale | number | 20 | False | Maximum zoom level. |
| True | True |
|
|
markers | array.<marker> | - | False | Markers. | True | True | True |
|
|
polyline | array.<polyline> | - | False | Routes. | True | True | True |
|
|
circles | array.<circle> | - | False | Circles. | True | True | True |
|
|
controls | Array.<control> | - | False | Controls (to be deprecated, it is recommended to use cover-view instead). | False | False | False |
|
|
include-points | array.<point> | - | False |
Zooms to include all given coordinates | True | True | True |
|
|
show-location | boolean | false | False | Shows current location with direction. | True | True | True |
|
|
polygons | array.<polygon> | - | False | Polygons. | True | True |
True |
|
|
subkey | string | - | False | The key for the custom maps. | False | False |
True, type=tencent. |
|
|
layer-style | number | 1 | False | The style for the custom maps. | False | False | False |
|
|
rotate | number | 0 | False | Rotation angle. Value range: 0-360. It is the angle between true north on the map and the device's y-axis. | False | True | False |
|
|
skew | number | 0 | False | Tilt angle. Valid range 0-40. It is the tilt angle around the Z-axis. | System map: False Tencent Maps: True Baidu Maps: True Amap: True | True | False |
|
|
enable-3D | boolean | false | False | Shows the 3D building blocks. | System map: False Tencent Maps: True Baidu Maps: False Amap: False | Google Maps: True Huawei Maps: True Tencent Maps: True Baidu Maps: True Amap: False | False |
|
|
show-compass | boolean | false | False | Shows the compass. | True | True | False |
|
|
show-scale | boolean | false | False | Show the scale. | True | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: True Amap: True | True |
|
|
enable-overlooking | boolean | false | False | Enables the top view. | System map: False Tencent Maps: True Baidu Maps: True Amap: True | True | False |
|
|
enable-zoom | boolean | true | False | Whether to support zoom. | True | True | True |
|
|
enable-scroll | boolean | true | False | Whether to support scrolling. | True |
True |
True |
|
|
enable-rotate | boolean | - | False | Whether to support rotation. | True |
True |
False |
|
|
enable-satellite | boolean |
false | False |
Whether to enable the satellite map. | True | Google Maps: True Huawei Maps: False Tencent Maps: True Baidu Maps: True Amap: True |
True, and type=google. |
|
|
enable-traffic | boolean | false | False | Whether to enable real-time traffic information. | True | True | True |
|
|
enable-poi | boolean | true | False | Whether to display the point of interest (POI). | System map: False Tencent Maps: True Baidu Maps: False Amap: False | Google Maps: True Huawei Maps: False Tencent Maps: True Baidu Maps: True Amap: True | True, and type=google. |
|
|
enable-building | boolean | true | False | Whether to display the buildings. | System map: False Tencent Maps: True Baidu Maps: True Amap: True | Google Maps: True Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: True | True, and type=google. |
|
|
setting | object | - | False | Configuration options. | False | False | True |
|
|
bindtap | eventhandle | - | False | Triggered when the user taps the map, which returns the latitude and longitude information. | True | True | True |
|
|
bindmarkertap | eventhandle | - | False | Triggered when the user taps the marker, e.detail = {markerId}. | True | True | True |
|
|
bindlabeltap | eventhandle | - | False | Triggered when the user taps the label, e.detail = {markerId}. | True | False | True, and type=tencent. |
|
|
bindcontroltap | eventhandle | - | False | Triggered when the user taps the control, e.detail = {controlId}. | False | False | False |
|
|
bindcallouttap | eventhandle | - | False | Triggered when the user taps the marker's callout bubble, e.detail = {markerId}. | False | False |
True |
|
|
bindupdated | eventhandle | - | False | Triggered when the map rendering is completed. |
False |
True | True |
|
|
bindregionchange | eventhandle | - | False | Triggered when the view changes. | True | True | True |
|
|
bindpoitap |
eventhandle | - | False | Triggered when the user taps the POI on the map, e.detail = {name, longitude, latitude}. | False | True | True |
|
|
bindanchorpointtap |
eventhandle | - | False | Triggered when the user taps the location marker, e.detail = {longitude, latitude}. | False | False | False |
|
|
Notes:
Color values in the map, such as color, borderColor, and bgColor, must be represented using a 6-digit (or 8-digit) hexadecimal format. When using 8 digits, the last two digits represent the alpha value, e.g., #000000AA.
Latitude and longitude are required fields for the map component. If not specified, the default values will be set to the coordinates of Beijing.
The map component uses the GCJ-02 coordinate system. When calling the wx.getLocation, you need to specify the type as gcj02.
Returned values of regionchange
When the view changes, the regionchange event is triggered twice, with the returned type values being begin and end.
Begin stage: Returns causedBy with valid values: gesture (triggered by a gesture) and update (triggered by an API update).
End stage: Returns causedBy with valid values: drag (caused by dragging), scale (caused by scaling) and update (caused by calling an update API).
e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}
setting
A setting object is provided to uniformly set map configurations. For certain animation properties like rotate and skew, they cannot take effect simultaneously if set separately using setData. Instead, they need to be modified together through the setting object.
const setting = {
rotate: 0,
showLocation: false,
subKey: '',
layerStyle: 1,
enableZoom: true,
enableScroll: true,
enableRotate: false,
showCompass: false,
enableSatellite: false,
}
this.setData({
setting: {
enableZoom: false,
enableScroll: false,
}
})
marker
Markers, which are used to display the specific locations on the map.
|
id | Marker ID. | number | False | This ID will be returned in the callback when the marker is tapped. It is recommended to set an ID for each marker to ensure better performance when updating the markers. | True | True | True |
clusterId | Cluster ID. | number | False | Used for custom point clustering effects. | False | False | False |
joinCluster | Whether to participate in clustering. | boolean | False | Default is not to participate in clustering. | False | Google Maps: True Huawei Maps: True Tencent Maps: True Baidu Maps: False Amap: False | False |
latitude | The latitude. | number | True | Floating point number. Value range: -90 - 90. | True | True | True |
longitude | The longitude. | number | True | Floating point number. Value range: -90 - 90. | True | True | True |
title | Marker name. | string | False | Displayed when tapped, ignored if callout exists. | True | True | True, and type=tencent. |
zIndex | Displays level. | number | False | - | False | True | True |
iconPath | Icon path. | string | True | Path to the image in the project directory, supports network path, local path, and code package path. | True | True | True |
rotate | Rotation angle. | number | False | Clockwise rotation angle, range 0-360, default is 0. | False | True | True, and type=tencent. |
alpha | Marker transparency. | number | False |
Default value: 1, which means non-transparency. Value range: 0-1. | False | True | True, and type=tencent. |
width | Width of the marker icon. | number/string | False | It defaults to the actual width of the image. | False | True | False |
height | Height of the marker icon. | number/string | False | It defaults to the actual height of the image. | False | True | False |
callout | Callout bubble window above the marker. |
object | False | See the table below for supported properties, and line breaks can be recognized. | True | True | True |
customCallout | Custom callout bubble window. | object | False | See the table below for supported properties. | False | False | False |
label | Adds labels next to the markers. | object | False | See the table below for supported properties, and line breaks can be recognized. | False | False | True |
anchor | The anchor point of the latitude and longitude on the the marker icon, default is the bottom center. | object | False | {x, y}, where x represents horizontal (0-1) and y represents vertical (0-1). {x: .5, y: 1} means the bottom center. | False | True | False |
Callout bubble above the marker
|
content | Text. | string | True | True | True |
color | Text color. | string | False | True | True |
fontSize | Font size. | number | False | True | True |
borderRadius | Border radius. | number | False | True | True |
borderWidth | Width of the border. | number | False | True | True |
borderColor | Border color. | string | False | True | True |
bgColor | Background color. | string | False | True | True |
padding | Padding around the text. | number | False | True | True |
display |
'BYCLICK' (show when tapped), 'ALWAYS' (always show) | string | False | False | True |
textAlign |
Text alignment. Valid values: left, right, center. | string | False | True | False |
anchorX |
Horizontal offset, positive values move right. | number | False | Google Maps: True Huawei Maps: True Tencent Maps: True Baidu Maps: False Amap: True | False |
anchorY |
Vertical offset, positive values move down. | number | False | Google Maps: True Huawei Maps: True Tencent Maps: True Baidu Maps: False Amap: True | False |
Custom callout properties for markers
When customCallout is present, the callout and title properties will be ignored. Custom callout bubbles use cover-view for higher flexibility.
|
display | 'BYCLICK' (show when tapped), 'ALWAYS' (always show) | string | False | False | False |
anchorX | Horizontal offset, positive values move right. | number | False | False | False |
anchorY | Vertical offset, positive values move down. | number | False | False | False |
To use a custom callout, add a slot node named callout under the map component.Inside this slot, use cover-view with the marker-id property to bind it to the marker. When the marker is created, the content displayed in this cover-view will appear as the callout above the marker.
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
</cover-view>
</map>
Label properties for markers
|
content | Text. | string | False | False | True |
color | Text color. | string | False | False | True |
fontSize | Font size. | number | False | False | True |
anchorX | The coordinates of the label, with the origin being the latitude and longitude of the marker. | number | False | False | True |
anchorY | The coordinates of the label, with the origin being the latitude and longitude of the marker. | number | False | False | True |
borderWidth | Width of the border. | number | False | False | True |
borderColor | Border color. | string | False | False | True |
borderRadius | Border radius. | number | False | False | True |
bgColor | Background color. | string | False | False | True |
padding | Padding around the text. | number | False | False | True |
textAlign | Text alignment. Valid values: left, right, center. | string | False | False | True |
Marker clustering
Feature description:When there are too many markers on the map, it can lead to marker overlap, incomplete display, and decreased overall performance. To address these issues, marker clustering feature is introduced.
System map (iOS only)
Directions:
(Optional)When MapContext.on('markerClusterCreate', callback)is triggered, update the style of the cluster by using MapContext.addMarkers . Google Maps (Android only)
Specify the joinCluster when adding markers, and the markers that meet the conditions will be automatically clustered.
polyline
Feature description:A polyline connects a series of coordinates, drawing a line from the first point in the array to the last. When drawing a rainbow line, you need to specify different colors for each segment. For example, if 5 points are contained, colorList should have 4 color values. If colorList is shorter than points.length - 1, the remaining segments will use the last color in the list.
|
points | Array of latitude and longitude coordinates. | Array | True | [{latitude: 0, longitude: 0}] | True | True | True |
color | Color of the line. | string | False | Hexadecimal. | True | True | True |
colorList | Color of the rainbow lines. | Array | False | Ignore the color value when it exists. | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: True Amap: True | False |
width | Width of the line. | number | False |
| True | True | True |
dottedLine | Whether it is a dotted line. | boolean | False | Default value: false | True | True | True |
arrowLine | Line with arrows. | boolean | False | - | False | True | False |
arrowIconPath | Replaces the arrow icon. | string | False | - | False | True | False |
borderColor | Border color of the line. | string | False | - | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | True |
borderWidth | Width of the border. | number | False | - | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | True |
level | Z-index level for overlapping. | string | False | Default value: abovelabels | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | False |
textStyle | Text style. | TextStyle | False | Text style on the polyline. | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | False |
segmentTexts | Segmented texts. | Array<SegmentText> | False | Text content and position for each segment. | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | False |
SegmentText
|
name | Name. | string |
startIndex | Start point. | number |
endIndex | End point. | number |
TextStyle
|
textColor | Text color. | string | #000000 |
strokeColor | Stroke color. | number | #ffffff |
fontSize | Font size. | number | 14 |
The level field indicates the stacking order of map elements. The available options are as follows:
|
abovelabels | Displays above all POIs. |
abovebuildings | Displays above buildings but below POIs. |
aboveroads | Displays above roads but below buildings. |
polygon
Feature description:A polygon is created by specifying a series of coordinate points, forming a closed shape based on the points data.
|
dashArray | Dashed border lines. |
Array<number> | False | Default is [0, 0] for a solid line. [10, 10] creates a dashed line with 10 pixels of solid line followed by 10 pixels of space, repeating. | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | False |
points | Array of latitude and longitude coordinates. | array | True | [{latitude: 0, longitude: 0}] | True | True | True |
strokeWidth | Width of the stroke. | number | False | - | True | True | False |
strokeColor | Color of the stroke. | string | False | Hexadecimal | True | True | False |
fillColor | Fill color of the polygon. | string | False | Hexadecimal | True | True | True |
zIndex | Z-axis value of the polygon. | number | False | - | False | True | True |
level | Stacking order of map elements. | string | False | Default value: abovelabels | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | False |
circle
Feature description:Displays circles on the map.
|
latitude | The latitude. | number | True | Floating point number. Value range: -90 - 90. | True | True | True |
longitude | The longitude. | number | True | Floating points. Value range: -180 - 180. | True | True | True |
color | Color of the stroke. | string | False | Floating points. Value range: -180 - 180. | True | True | True |
fillColor | Fill color of the circle. | string | False | Hexadecimal | True | True | True |
radius | Radius. | number | True | - | True | True | True |
strokeWidth | Width of the stroke. | number | False | - | True | True | False |
level | Stacking order of map elements. | string | False | Default value: abovelabels | False | Google Maps: False Huawei Maps: False Tencent Maps: True Baidu Maps: False Amap: False | False |
control
Feature description:Displays controls on the map that do not move with the map. It is recommended to use cover-view instead since this component will be deprecated soon.
|
id | The control ID. | number | False | This ID will be returned in the callback when the control is tapped. | False | False | False |
position | The position of the control on the map. | object | True | The position of the control relative to the map. | False | False | False |
iconPath | Icon path. | string | True | Path to the image in the project directory, supports, local path, and code package path. | False | False | False |
clickable | Whether the control can be tapped. | boolean | False | Cannot be tapped by default. | False | False | False |
position
|
left | Distance from the left edge of the map. | number | False | Default value: 0 | False | False | False |
top | Distance from the top edge of the map. | number | False | Default value: 0 | False | False | False |
width | The width. | number | False | It defaults to the width of the image. | False | False | False |
height | The height. | number | False | It defaults to the height of the image. | False | False | False |
Return values for bindregionchange
|
type | Triggered when the view changes start or end. | string | begin for start, end for end. |
causedBy | Reason for the view change. | string | drag for dragging, scale for scaling, update for API call. |
Scale
|
Scale | 1 cm = 1000 km | 1 cm = 500 km | 1 cm = 200 km | 1 cm = 100 km | 1 cm = 50 km | 1 cm = 25 km | 1 cm = 20 km | 1 cm = 10 km | 1 cm = 5 km |
Zoom level | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
Scale | 1 cm = 2 km | 1 cm = 1km | 1 cm = 500 m | 1 cm = 200 m | 1 cm = 100 m | 1 cm = 50 m | 1 cm = 20 m | 1 cm = 10 m | 1 cm = 5 m |
