map
This topic introduces the map components. If multiple map components are displayed on the same page, different IDs are required. The map components are the native components in the application, which have the highest level of the hierarchy. No matter what the value of zIndex
is, the level of other components on the page cannot be higher than that of the map components.
Related API:my.createMapContext(mapId)
Prerequisites
- Currently the map components support the Google Maps only.
- Do not use the map components in scroll-view.
- The map components do not support CSS animation.
- If the user zooms in or zooms out the map, reset the value of
scale
in theonRegionChange
function before setting the latitude and longitude of the location. Otherwise, the map restores to the original size. See sample codes ofregionchange
for details. - The mini program does not support obtaining the latitude and longitude of the current map.
Sample codes
<view>
<map id="map" longitude="103.855457" latitude="1.339712" 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">changeScale</button>
<button onTap="getCenterLocation">getCenterLocation</button>
<button onTap="moveToLocation">moveToLocation</button>
<button onTap="changeCenter">changeCenter</button>
<button onTap="changeMarkers">changeMarkers</button>
</view>
Page({
data: {
scale: 14,
longitude: 103.855457,
latitude: 1.339712,
markers: [{
iconPath: "/image/green_tri.png",
id: 10,
latitude: 1.342983,
longitude: 103.867935,
width: 50,
height: 50
},{
iconPath: "/image/green_tri.png",
id: 11,
latitude: 1.343573,
longitude: 103.861916,
width: 50,
height: 50,
customCallout: {
type: 1,
time: '1',
},
fixedPoint:{
originX: 400,
originY: 400,
},
iconAppendStr: 'Map icon'
}],
includePoints: [{
latitude: 1.347016,
longitude: 103.860167,
}],
polyline: [{
points: [{
longitude: 103.863218,
latitude: 1.351628
}, {
longitude: 103.862718,
latitude: 1.351428
}, {
longitude: 103.862218,
latitude: 1.350828
}, {
longitude: 103.861718,
latitude: 1.350428
}, {
longitude: 103.861018,
latitude: 1.351028
}],
color: "#FF0000DD",
width: 5,
dottedLine: false
}],
circles: [{
latitude: 1.351628,
longitude: 103.863718,
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) {
// Use my.createMapContext to obtain the map context.
this.mapCtx = my.createMapContext('map')
},
getCenterLocation() {
this.mapCtx.getCenterLocation(function (res) {
console.log(res.longitude)
console.log(res.latitude)
})
},
moveToLocation() {
this.mapCtx.moveToLocation()
},
regionchange(e) {
console.log('regionchange', e);
// Note: If the user zooms in or zooms out the map, reset the value of scale of the onRegionChange function before setting the latitude and longitude of the location. Otherwise the map restores to the original size.
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: 103.867935,
latitude: 1.343573,
includePoints: [{
latitude: 1.351028,
longitude: 103.861018,
}],
});
},
//An indicator of whether to support gesture events. When isGestureEnable is 1, gesture events are supported. Otherwise gesture events are not supported.
gestureEnable() {
this.mapCtx.gestureEnable({isGestureEnable:1});
},
//An indicator of whether to show the compass. When isShowCompass is 1, display the compass. Otherwise the compass is not displayed.
showsCompass() {
this.mapCtx.showsCompass({isShowsCompass:1});
},
changeMarkers() {
this.setData({
markers: [{
iconPath: "/image/green_tri.png",
id: 10,
latitude: 1.351028,
longitude: 103.861018,
width: 50,
height: 50
}],
includePoints: [{
latitude: 1.350428,
longitude: 103.861718,
}],
});
},
})
Parameters
Property | Type | Description |
style | String | Inline style. |
class | String | Style name. |
latitude | Number | The latitude of the central point. |
longitude | Number | The longitude of the central point. |
scale | Number | The zoom level. The value ranges from 5Â to 18 and is 16 by default. |
markers | Array | The location marker. See markers for details. |
polyline | Array | The polyline. See polyline for details. |
circles | Array | The circle. See circles for details. |
polygon | Array | The polygon. See polygon for details. |
show-location | Boolean | An indicator of whether to display the current location with directions. |
include-points | Array | The view is extended in a small scale with the passed coordinates.
|
include-padding | Object | The view is displayed within the map padding.
|
setting | Object | Settings.
|
onMarkerTap | EventHandle | Call this function when clicking on Marker.
|
onCalloutTap | EventHandle | Call this function when clicking on the tooltip of Marker.
|
onControlTap | EventHandle | Call this function when clicking on control.
|
onRegionChange | EventHandle | Call this function when the view is changed.
|
onTap | EventHandle | Call this function when clicking on the map.
|
markers
The location marker.
Notes:
- With the
markers
parameter, multiple location markers can be displayed. - The description of the location marker does not support English.
polygon
Specify a series of coordinates, which form a closed polygon based on the points
.
Property | Description | Type | Required |
points | An array of the latitude and longitude.
| Array | Yes |
color | The stroke color. Use hexadecimal numbers to set colors.
| String | No |
fillColor | The fill color. Use hexadecimal numbers to set colors.
| String | No |
width | The stroke width. | Number | No |
polyline
Specify a series of coordinates, which are connected from the first item to the last item in an array.
Property | Description | Type | Required |
points | An array of the latitude and longitude.Â
| Array | Yes |
color | The stroke color. Use hexadecimal numbers to set colors.
| String | No |
width | The stroke width. | Number | No |
iconWidth | The icon width. | Number | No |
zIndex | The zIndex compared to other polys. | Number | - |
iconPath | Displayed icon. Note: The image path in the project directory. The path can be written as a relative path prefixed with a forward slash (/), which indicates a relative root directory of a mini program. If this parameter is specified, ignore the value of | String | - |
circles
Display a circle on the map.
Property | Description | Type | Required |
latitude | The latitude. The value ranges from -90 to 90. | Float | Yes |
longitude | The longitude. The value ranges from -180 to 180. | Float | Yes |
color | The stroke color. Use hexadecimal numbers to set colors.
| String | No |
fillColor | The fill color. Use hexadecimal numbers to set colors.Â
| String | No |
radius | The radius in meters. | Number | Yes |
strokeWidth | The stroke width. | Number | No |
callout
The customs tooltip over the location marker.
Property | Description | Type | Required |
content | The content in the tooltip, which is empty by default.  | String | No |
customCallout
The customs background of the tooltip.
Property | Description | Type | Required |
type | The style of the background. Valid values are:
| Number | Yes |
time | The time. | String | Yes |
descList | The description array.
| Array | Yes |
fixedPoint
The fixed point based on the screen.
Property | Description | Type | Required |
originX | The number of pixels in the horizontal direction from the upper-left corner of the map. | Number | Yes |
originY | The number of pixels in the vertical direction from the upper-left corner of the map. | Number | Yes |
The latitude and longitude must be set for the map components. Otherwise the default coordinate is Beijing's latitude and longitude.
Location marker design
Priority
- The customCallout, callout, and label are excluded with each other. The priority order is label > customCallout > callout.
- The style and icon are excluded with each other. The priority order is:
- style > iconAppendStr
- style > icon
style
Sample code | Sample legend |
copy
| |
copy
| |
copy
|
label
Property | Required | Remark |
content | Yes | - |
color | No | The default value is #000000. |
fontsize | No | The default value is 14. |
borderRadius | No | The default value is 20. |
bgColor | No | The default value is #FFFFFF. |
padding | No | The default value is 10. |
FAQs
How do the map components redirect the mini program to the Google Maps for the navigation?
Use the my.openLocation API.
How to obtain the value of scale
when the optimize
property of the map components is true?
Use the onRegionChange
function.
How to create the polygon area on the map manually?
Use the polygon
property.
Does the text in iconAppendStr support line breaks?
No, the text in iconAppendStr does not support line breaks.
How to modify icons of the first item and the last item in the map components after iconPath
is set?
Currently the modification is not supported.