API
Attribute name | Type | Default value | Description |
---|---|---|---|
style | String | Inline style | |
class | String | Style name | |
longitude | Number | Longitude of the center | |
latitude | Number | Latitude of the center | |
scale | Number | 16 | Scale level, ranging from 5~18 |
markers | Array | Marker | |
polyline | Array | Polyline | |
circles | Array | Circle | |
controls | Array | Control | |
polygon | Array | Polygon | |
include-points | Array | Zoom out the view to include all given coordinates. | |
show-location | Boolean | Whether or not to display the current location with direction. | |
onMarkerTap | EventHandle | Triggered when a marker is tapped. | |
onCalloutTap | EventHandle | Triggered when the bubble of the marker is tapped. | |
onControlTap | EventHandle | Triggered when a control is tapped. | |
onRegionChange | EventHandle | Triggered when the view changes, {type: “begin”/“end”, latitude, longitude, scale}. | |
onTap | EventHandle | Triggered when the map is tapped. |
markers
A marker is used to display the location marked on the map.
Attribute name | Description | Type | Required | Remarks |
id | Marker ID | Number | No | The tap event callback will return this ID. |
latitude | Latitude | Float | Yes | Range -90 ~ 90 |
longitude | Longitude | Float | Yes | Range -180 ~ 180 |
title | Name of a marker | String | No | |
iconPath | Displayed icon | String | Yes | Image path under the project directory, which can be a relative path, starting with "/" to indicate that it is a relative path of the MINI program root directory. |
rotate | Rotation degree | Number | No | Clockwise angle, ranging from 0 ~ 360. It defaults to 0. |
alpha | Marker transparency | Number | No | Whether it is transparent or not. It defaults to 1. |
width | Marker icon width | Number | No | It defaults to the actual width of the image. |
height | Marker icon height | Number | No | It defaults to the actual height of the image. |
callout | Bubble on the marker | Object | No | {content} |
anchorX | The horizontal position (ratio) of anchor (coordinate) in the marker icon | Double | No | These two values need to appear in pairs, and anchorX represents horizontal (0-1) while anchorY represents vertical (0-1). For example: anchorX:0.5, anchorY:1; represents the middle of the bottom. |
anchorY | The vertical position (ratio) of anchor (coordinate) in the marker icon | Double | No |
polygon
Polygon is used to construct a polygonal object.
Attribute name | Description | Type | Required | Remarks |
---|---|---|---|---|
points | Latitude and longitude array | Array | Yes | [{latitude: 0, longitude: 0}] |
color | Line color | String | No | Expressed in 8-digit hexadecimal, and the last two digits represent alpha value, such as: #eeeeeeAA. |
fillColor | Fill color | String | No | Expressed in 8-digit hexadecimal, and the last two digits represent alpha value, such as: #eeeeeeAA. |
width | Line width | Number | No | - |
polyline
Polyline is used to specify a series of coordinates that connect the first element of the array to the last element.
Attribute name | Description | Type | Required | Remarks |
---|---|---|---|---|
points | Latitude and longitude array | Array | Yes | [{latitude: 0, longitude: 0}] |
color | Line color | String | No | Expressed in 8-digit hexadecimal, and the last two digits represent alpha value, such as: #eeeeeeAA. |
width | Line width | Number | No | |
dottedLine | Whether it is the dotted line | Boolean | No | Defaults to false |
circles
Circles is used to display circles on the map.
Attribute name | Description | Type | Required | Remarks |
---|---|---|---|---|
latitude | Latitude | Float | Yes | Range -90 ~ 90 |
longitude | Longitude | Float | Yes | Range -180 ~ 180 |
color | Stroke color | String | No | Expressed in 8-digit hexadecimal, and the last two digits represent alpha value, such as: #eeeeeeAA. |
fillColor | Fill color | String | No | Expressed in 8-digit hexadecimal, and the last two digits represent alpha value, such as: #eeeeeeAA. |
radius | Radius | Number | Yes | - |
strokeWidth | Stroke width | Number | No | - |
controls
Controls is used to display controls on the map. The controls do not move with the map.
Attribute name | Description | Type | Required | Remarks |
---|---|---|---|---|
id | Control ID | Number | No | The tap event callback will return this ID. |
position | The position of the control on the map | Object | Yes | The position relative to the map. |
iconPath | Displayed icon | String | Yes | Image path under the project directory, which can be a relative path, starting with “/“ to indicate that it is a relative path of the MINI program root directory. |
clickable | Whether it can be tapped.. | Boolean | No | It defaults to false. |
position
Attribute name | Description | Type | Required | Remarks |
---|---|---|---|---|
left | How far it is from the left boundary of the map. | Number | No | It defaults to 0, in px. |
top | How far it is from the upper boundary of the map. | Number | No | It defaults to 0, in px. |
width | Control width | Number | No | It defaults to the image width, in px. |
height | Control height | Number | No | It defaults to the image height, in px. |
The latitude and longitude of the map component are mandatory. If the latitude and longitude are not provided, then it defaults to the latitude and longitude of Beijing.
Legend
Code sample
<view>
<map id="map" longitude="120.131441" latitude="30.279383" scale="{{scale}}" controls="{{controls}}"
onControlTap="controltap" markers="{{markers}}"
onMarkerTap="markertap"
polyline="{{polyline}}" circles="{{circles}}"
onRegionChange="regionchange"
onTap="tap"
show-location style="width: 100%; height: 300px;"
include-points="{{includePoints}}"></map>
<button onTap="changeScale">Change scale</button>
<button onTap="getCenterLocation">getCenterLocation</button>
<button onTap="moveToLocation">moveToLocation</button>
<button onTap="changeCenter">Change center</button>
<button onTap="changeMarkers">Change markers</button>
</view>
Page({
data: {
scale: 14,
longitude: 120.131441,
latitude: 30.279383,
markers: [{
iconPath: "/image/green_tri.png",
id: 10,
latitude: 30.279383,
longitude: 120.131441,
width: 50,
height: 50
}],
includePoints: [{
latitude: 30.279383,
longitude: 120.131441,
}],
polyline: [{
points: [{
longitude: 120.131441,
latitude: 30.279383
}, {
longitude: 120.128821,
latitude: 30.278200
}, {
longitude: 120.131618,
latitude: 30.277600
}, {
longitude: 120.132520,
latitude: 30.279393
}, {
longitude: 120.137517,
latitude: 30.279383
}],
color: "#FF0000DD",
width: 5,
dottedLine: false
}],
circles: [{
latitude: 30.279383,
longitude: 120.131441,
color: "#000000AA",
fillColor: "#000000AA",
radius: 80,
strokeWidth: 5,
}],
controls: [{
id: 5,
iconPath: '../../resources/pic/2.jpg',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
onReady(e) {
// Get the map context using my.createMapContext
this.mapCtx = my.createMapContext('map')
},
getCenterLocation() {
this.mapCtx.getCenterLocation({
success: (res) => {
my.alert({
content: 'longitude:' + res.longitude + '\nlatitude:' + res.latitude + '\nscale:' + res.scale,
});
console.log(res.longitude);
console.log(res.latitude);
console.log(res.scale);
},
});
},
moveToLocation() {
this.mapCtx.moveToLocation()
},
regionchange(e) {
console.log('regionchange', e);
// Note: After zooming in or out the map, reset the scale value of data in the onRegionChange function.
// If not set, reloading after dragging the map may cause the scale to restore to original size before scaling.
if (e.type === 'end') {
this.setData({
scale: e.scale
});
}
},
markertap(e) {
console.log('marker tap', e);
},
controltap(e) {
console.log('control tap', e);
},
tap() {
console.log('tap:');
},
changeScale() {
this.setData({
scale: 8,
});
},
changeCenter() {
this.setData({
longitude: 113.324520,
latitude: 23.199994,
includePoints: [{
latitude: 23.199994,
longitude: 113.324520,
}],
});
},
changeMarkers() {
this.setData({
markers: [{
iconPath: "/image/green_tri.png",
id: 10,
latitude: 21.21229,
longitude: 113.324520,
width: 50,
height: 50
}],
includePoints: [{
latitude: 21.21229,
longitude: 113.324520,
}],
});
},
})
Attentions
map
component is a native component created by a client and placed at highest level of hierarchy.Do not use
map
component inscroll-view
.CSS animations are not valid for
map
components.If you zoomed in or out the map, reset the
scale
value ofdata
in theonRegionChange
function. If not set, reloading after dragging a map area may cause the scale to restore to original size before scaling. For details, see theregionchange
function section in Code sample.