All Products
Search
Document Center

Map

Last Updated: Feb 04, 2021

This topic describes the map component.

Instructions

  • The map component is a native component created by the client. Native components are at the highest level, and therefore other components in a page are always underneath native components regardless of the z-index value.
  • Do not use the map component in scroll-view.
  • CSS animations do not work for the map component.
  • After you reduce or increase the map scale, be sure to set the scale value of data again in onRegionChange. Otherwise, dragging a map area restores the map scale to the previous value due to reloading. For details, see the regionchange function section in the sample code. For the 1.14.0 basic library or later, you can replace scale with the default-scale attribute to optimize the code.

Map

To display multiple map components on the same page, use different IDs for them.

Attribute
Type
Default value
Description
Supported versions
style
String
-
The inline style.
-
class
String
-
The style name.
-
latitude
Number
-
The central latitude.
-
longitude
Number
-
The central longitude.
-
scale
Number
16
The scale level, which ranges from 5 to 18.
-
default-scale
Number
16
The default scale level, which ranges from 5 to 18. If you only want to specify the initial scale, you can replace scale by setting default-scale. After the user scales, you no longer need to listen on onRegionChange, but set scale again.
The 1.14.0 basic library.
markers
Array
-
The overlay, which is an icon drawn at a point on the map.
-
polyline
Array
-
The overlay, which is a collection of multiple consecutive points (a route).
-
circles
Array
-
The overlay, which is a circle.
-
controls
Array
-
A control on the map View.
-
polygon
Array
-
The overlay, which is a polygon.
-
show-location
Boolean
-
Whether to display the current anchor point with a direction.
-
include-points
Array
-
Extend the field of view to cover the incoming coordinates
  1. [{ latitude: 30.279383, longitude: 120.131441,}]
-
include-padding
Object
-
Display the field of view within the padding scope
  1. { left:0, right:0, top:0, bottom:0}
-
ground-overlays
Array
-
The overlay, which is a custom map
  1. [{ // Upper right and lower left. 'include-points':[{ latitude: 39.935029, longitude: 116.384377, },{ latitude: 39.939577, longitude: 116.388331, }], image:'/image/overlay.png', alpha:0.25, zIndex:1}]
-
tile-overlay
Object
-
The overlay, which is a grid map
  1. { url:'http://xxx', type:0, // The url type. tileWidth:256, tileHeight:256, zIndex:1,}
-
setting
Object
-
Set
  1. { // The gesture. gestureEnable: 1, // The scale. showScale: 1, // The compass. showCompass: 1, // Slide downward with both hands. tiltGesturesEnabled: 1, // Display traffic. trafficEnabled: 0, // Map POI information. showMapText: 0, // The Amap logo position. logoPosition: { centerX: 150, centerY: 90 }}
-
onMarkerTap
EventHandle
-
Trigger when you click Marker
  1. { markerId, latitude, longitude,}
-
onCalloutTap
EventHandle
-
Trigger when you click the callout for Marker
  1. { markerId, latitude, longitude,}
-
onControlTap
EventHandle
-
Trigger when you click control
  1. { controlId}
-
onRegionChange
EventHandle
-
Trigger when the field of view is changed
  1. { type: "begin/end", latitude, longitude, scale}
-
onTap
EventHandle
-
Trigger when you click the map
  1. { latitude, longitude,}
-

markers

The marker point, which is used to display the marked position on the map.

Attribute name
Description
Type
Required
Notes
Minimum version
id
The ID of the marker point.
Number
No
The ID of the marker point, which is returned by the callback of the clicking event.
-
latitude
The latitude.
Float
Yes
The range is -90 to 90.
-
longitude
The longitude.
Float
Yes
The range is -180 to 180.
-
title
The name of the marker point.
String
No
-
-
iconPath
The displayed icon.
String
Yes
The image path in the project directory, which can be written as a relative path. If the path starts with '/' it indicates the path is relative to the mini-program root directory.
-
rotate
The rotation angle.
Number
No
The angle of clockwise rotation, which ranges from 0 to 360 and defaults to 0.
-
alpha
The transparency of the marker.
Number
No
Whether the marker is transparent, which defaults to 1.
-
width
The width of the marker icon.
Number
No
The default is the actual width of the image.
-
height
The height of the marker.
Number
No
The default is the actual height of the image.
-
callout
Customize the bubble window above the marker.
Object
No
The bubble on the marker. Only one bubble can be displayed on the map. To use it, bind onCalloutTap
  1. { content:"xxx"}
-
anchorX
The horizontal values of longitude and latitude at the anchor point of the marker icon.
Double
No
These two values ​​must appear in pairs. anchorX indicates the horizontal value (0-1), and y indicates the vertical value (0-1).
anchorX:0.5,
anchorY:1
The midpoint of the bottom edge.
-
anchorY
The vertical values of latitude and longitude at the anchor point of the marker icon.
Double
No
-
customCallout
The custom callout background.
Currently, only the Amap style is supported.
Object
No
  1. { "type": 2, "descList": [{ "desc": "Estimated", "descColor": "#333333" }, { "desc": "5 minutes", "descColor": "#108EE9" }, { "desc": "Reached", "descColor": "#333333" }], "isShow": 1}
-
iconAppendStr
The marker image can be from View.
String
No
By using
in conjunction with iconPath, you can combine the image corresponding to iconPath and this string to generate another image, which will be used as the marker icon.
-
iconAppendStrColor
The marker image can be from View, and the bottom describes the text color.
String
No
The default is #33B276.
-
fixedPoint
Fix points based on screen positions.
Object
No
Fix points based on screen positions
  1. { //The number of pixels from the upper-left corner of the map, whose format is Number. originX:100, originY:100}
-
markerLevel
The drawing level of the marker on the map.
Number
No
The Z coordinate system that is consistent with that of other overlays on the map.
-
label
Bubbles on the marker.
Object
No
Bubbles on the marker, which can be multiple on the map. To use this feature, bind onMarkerTap
  1. { content:"Hello Label", color:"#000000", fontSize:12, borderRadius:3, bgColor:"#ffffff", padding:5,}
-
style
The custom marker style.
Object
No
The custom marker style and its content.
-

polygon

It is used to construct polygonal objects.

Attribute name
Description
Type
Required
Notes
Supported versions
points
The latitude and longitude arrays.
Array
Yes
  1. [{ latitude: 0, longitude: 0}]
-
color
The line color.
String
No
The value is an 8-digit hexadecimal string, and the last two digits indicate the alpha value, such as #eeeeeeAA.
-
fillColor
The filling color.
String
No
The value is an 8-digit hexadecimal string, and the last two digits indicate the alpha value, such as #eeeeeeAA.
-
width
The line width.
Number
No
-
-

polyline

It is used to specify a series of coordinate points and connect the first item in the array until the last item.

Attribute name
Description
Type
Required
Notes
Minimum version
points
The latitude and longitude arrays.
Array
Yes
  1. [{ latitude: 0, longitude: 0}]
-
color
The line color.
String
No
The value is an 8-digit hexadecimal string, and the last two digits indicate the alpha value, such as #eeeeeeAA.
-
width
The line width.
Number
No
-
-
dottedLine
Whether the line is a dotted line.
Boolean
No
The default is false.
-
iconPath
The texture address of the line.
String
No
The image path in the project directory, which can be written as a relative path. If the path starts with '/' it indicates the path is relative to the mini-program root directory.
-
iconWidth
The width when the texture is used.
Number
No
-
-
zIndex
The Z coordinate of the overlay.
Number
-
-
-
iconPath
The texture.
String
-
The image path in the project directory, which can be a relative path. If the path starts with '/&#x27, it indicates the path relative to the mini-program root directory. If iconPath is specified, color will be ignored. However, you can use iconPath in conjunction with colorList. In this way, the texture floats above the rainbow line. To avoid covering the rainbow line, you can set the background color of the texture image to be transparent.
-
colorList
The rainbow line.
Array
-
The rainbow line, which is segmented based on points. For example, if points are 5, then colorList must pass 4 color values, and so on. If the colorList value is less than 4, the remaining path color is the same as the last color.
  1. [ "#AAAAAA", "#BBBBBB"]
-

circles

It is used to display circles on the map.

Property Description Type Required Remarks Supported versions
latitude The latitude. Float Yes The value ranges from -90 to 90. -
longitude The longitude. Float Yes The value ranges from -180 to 180. -
color The stroke color. String No The value is an 8-digit hexadecimal string, and the last two digits indicate the alpha value such as #eeeeeeAA. -
fillColor The filling color. String No The value is an 8-digit hexadecimal string, and the last two digits indicate the alpha value such as #eeeeeeAA. -
radius The radius. Number Yes - -
strokeWidth The stroke width. Number No - -

controls

It is used to display controls on the map, and the controls do not move with the map.

Property Description Type Required Remarks Supported versions
id The control ID. Number No The control id, which is returned by the callback of the clicking event. -
position The control position on the map. Object Yes The relative map position. -
iconPath The displayed icon. String Yes The image path in the project directory, which can be a relative path. If the path starts with’/‘, it indicates the path relative to the mini-program root directory. -
clickable Whether the control is clickable. Boolean No The default value is false. -

position

The control position on the map and the control size.

Property Description Type Required Remarks
left The distance to the left border of the map. Number No The default is 0.
top The distance to the upper border of the map. Number No The default is 0.
width The control width. Number No The default is the image width.
height The control height. Number No The default is the image height.

callout

Customize the bubble window above the marker point.

Property Description Type Required Remarks
content The content of the bubble window. String No The default is null.

customCallout

Customize the callout background.Currently, only the Amap style is supported.

Attribute name
Description
Type
Required
Notes
type
The style type.
Number
Yes
The value 0 indicates the black style, 1 indicates the white style, and 2 indicates the background and text combination, as shown in the figure below.
time
The time.
String
Yes
The time value.
descList
The description array.
Array
Yes
The description array
  1. { "type": 0, "time": "3", "descList": [{ "desc": "Click to take a taxi now", "descColor": "#ffffff" }], "isShow": 1}

fixedPoint

The fixed point based on the screen position.

Property Description Type Required Remarks
originX The horizontal pixel point. Number Yes The number of pixels from the upper-left corner of the map, which starts from 0.
originY The vertical pixel point. Number Yes The number of pixels from the upper-left corner of the map, which starts from 0.

The longitude and latitude of the map component must be set. If the longitude and latitude are not specified, the default is the longitude and latitude of Beijing.

Marker illustration

Description of Marker style priorities

  • customCallout, callout, and label are mutual exclusive. The priority order is label > customCallout > callout.
  • style and icon are mutual exclusive. The priority order is style > iconAppendStr and style > icon.

style

The structure
The sample image
Supported versions
  1. { type:1, text1:"Style1", icon1:'xxx', icon2:'xxx'}
-
  1. { type:2, text1:"Style2", icon1:'xxx', icon2:'xxx'}
-
  1. { type:3, icon:xxx, //This parameter is optional. text:xxx, //This parameter is required. color:xxx, //The default is #33B276. bgColor:xxx, // The default is #FFFFFF. gravity:"left/center/right", // The default is center. fontType:"small/standard/large" // The default is standard.}
-

customCallout

The structure
The sample image
Supported versions
  1. { "type": 0, "time": "3", "descList": [{ "desc": "Click to take a taxi now", "descColor": "#ffffff" }], "isShow": 1}
-
  1. { "type": 1, "time": "3", "descList": [{ "desc": "Click to take a taxi now", "descColor": "#333333" }], "isShow": 1}
-
  1. { "type": 2, "descList": [{ "desc": "Estimated", "descColor": "#333333" }, { "desc": "5 minutes", "descColor": "#108EE9" }, { "desc": "Reached", "descColor": "#333333" }], "isShow": 1}
-
### label
The structure
The illustration
Supported versions
  1. { content:"Hello Label", color:"#000000", fontSize:16, borderRadius:5, bgColor:"#ffffff", padding:12,}
-
  • content: This parameter is required.
  • color: This parameter is optional and defaults to “#000000”.
  • fontsize: This parameter is optional and defaults to 14.
  • borderRadius: This parameter is optional and defaults to 20.
  • bgColor: This parameter is optional and defaults to “#FFFFFF”.
  • padding: This parameter is optional and defaults to 10.

Illustration

image | center

Code sample

  1. <view>
  2. <map id="map" longitude="120.131441" latitude="30.279383" scale="{{scale}}" controls="{{controls}}"
  3. onControlTap="controltap" markers="{{markers}}"
  4. onMarkerTap="markertap"
  5. polyline="{{polyline}}" circles="{{circles}}"
  6. onRegionChange="regionchange"
  7. onTap="tap"
  8. show-location style="width: 100%; height: 300px;"
  9. include-points="{{includePoints}}"></map>
  10. <button onTap="changeScale">Change the scale value</button>
  11. <button onTap="getCenterLocation">getCenterLocation</button>
  12. <button onTap="moveToLocation">moveToLocation</button>
  13. <button onTap="changeCenter">Change the center value</button>
  14. <button onTap="changeMarkers">Change the markers value</button>
  15. </view>
  1. Page({
  2. data: {
  3. scale: 14,
  4. longitude: 120.131441,
  5. latitude: 30.279383,
  6. markers: [{
  7. iconPath: "/image/green_tri.png",
  8. id: 10,
  9. latitude: 30.279383,
  10. longitude: 120.131441,
  11. width: 50,
  12. height: 50
  13. },{
  14. iconPath: "/image/green_tri.png",
  15. id: 10,
  16. latitude: 30.279383,
  17. longitude: 120.131441,
  18. width: 50,
  19. height: 50,
  20. customCallout: {
  21. type: 1,
  22. time: '1',
  23. },
  24. fixedPoint:{
  25. originX: 400,
  26. originY: 400,
  27. },
  28. iconAppendStr: 'The Huanglong Times Square test'
  29. }],
  30. includePoints: [{
  31. latitude: 30.279383,
  32. longitude: 120.131441,
  33. }],
  34. polyline: [{
  35. points: [{
  36. longitude: 120.131441,
  37. latitude: 30.279383
  38. }, {
  39. longitude: 120.128821,
  40. latitude: 30.278200
  41. }, {
  42. longitude: 120.131618,
  43. latitude: 30.277600
  44. }, {
  45. longitude: 120.132520,
  46. latitude: 30.279393
  47. }, {
  48. longitude: 120.137517,
  49. latitude: 30.279383
  50. }],
  51. color: "#FF0000DD",
  52. width: 5,
  53. dottedLine: false
  54. }],
  55. circles: [{
  56. latitude: 30.279383,
  57. longitude: 120.131441,
  58. color: "#000000AA",
  59. fillColor: "#000000AA",
  60. radius: 80,
  61. strokeWidth: 5,
  62. }],
  63. controls: [{
  64. id: 5,
  65. iconPath: '../../resources/pic/2.jpg',
  66. position: {
  67. left: 0,
  68. top: 300 - 50,
  69. width: 50,
  70. height: 50
  71. },
  72. clickable: true
  73. }]
  74. },
  75. onReady(e) {
  76. // Call my.createMapContext to obtain the map context.
  77. this.mapCtx = my.createMapContext('map')
  78. },
  79. getCenterLocation() {
  80. this.mapCtx.getCenterLocation(function (res) {
  81. console.log(res.longitude)
  82. console.log(res.latitude)
  83. })
  84. },
  85. moveToLocation() {
  86. this.mapCtx.moveToLocation()
  87. },
  88. regionchange(e) {
  89. console.log('regionchange', e);
  90. // Note: After you reduce or increase enlarge the map scale, be sure t reset the scale value of data in the onRegionChange function.
  91. // Otherwise, after you drag the map area, the map scale restores to the original value before scaling due to reloading.
  92. if (e.type === 'end') {
  93. this.setData({
  94. scale: e.scale
  95. });
  96. }
  97. },
  98. markertap(e) {
  99. console.log('marker tap', e);
  100. },
  101. controltap(e) {
  102. console.log('control tap', e);
  103. },
  104. tap() {
  105. console.log('tap:');
  106. },
  107. changeScale() {
  108. this.setData({
  109. scale: 8,
  110. });
  111. },
  112. changeCenter() {
  113. this.setData({
  114. longitude: 113.324520,
  115. latitude: 23.199994,
  116. includePoints: [{
  117. latitude: 23.199994,
  118. longitude: 113.324520,
  119. }],
  120. });
  121. },
  122. // Support the map not to accept gesture events. If the value of isGestureEnable is 1, this feature is supported. If the value is 0, this feature is not supported.
  123. gestureEnable() {
  124. this.mapCtx.gestureEnable({isGestureEnable:1});
  125. },
  126. // Whether to display the scale on the map. If the value of showsScale is 1, display the scale. If the value is 0, do not display the scale.
  127. showsScale() {
  128. this.mapCtx.showsScale({isShowsScale:1});
  129. },
  130. // Whether to display the compass on the map. If the value of showsCompass is 1, display the compass. If the value is 0, do not display the compass.
  131. showsCompass() {
  132. this.mapCtx.showsCompass({isShowsCompass:1});
  133. },
  134. changeMarkers() {
  135. this.setData({
  136. markers: [{
  137. iconPath: "/image/green_tri.png",
  138. id: 10,
  139. latitude: 21.21229,
  140. longitude: 113.324520,
  141. width: 50,
  142. height: 50
  143. }],
  144. includePoints: [{
  145. latitude: 21.21229,
  146. longitude: 113.324520,
  147. }],
  148. });
  149. },
  150. })