map component - mPaaS mini programs-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

Embed an interactive map with markers, polylines, circles, and controls in your mini program.

Usage notes

The map component is a native component at the highest layer. Other components cannot overlay it regardless of z-index values.
Do not use the map component in a scroll-view.
CSS animations do not work on the map component.
After zooming, reset the data scale value in onRegionChange. Otherwise, dragging reloads the map at the original scale. The regionchange function in the sample code demonstrates this. In base library 1.14.0+, use default-scale instead of scale to avoid this issue.

Map

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

Property	Type	Default	Description	Supported versions
style	String	-	Inline style	-
class	String	-	Class name	-
latitude	Number	-	Center latitude	-
longitude	Number	-	Center longitude	-
scale	Number	16	The zoom level. Valid values: 5 to 18.	-
default-scale	Number	16	Default zoom level. Valid values: 5 to 18. Unlike scale, does not require resetting via `onRegionChange` after zooming.	Base library 1.14.0
markers	Array	-	Icon overlays at specific map locations.	-
polyline	Array	-	Line overlays connecting a series of points.	-
circles	Array	-	Circle overlays.	-
controls	Array	-	Controls rendered above the map.	-
polygon	Array	-	Polygon overlays.	-
show-location	Boolean	-	Shows the current location with a direction indicator.	-
include-points	Array	-	Expands the viewport to include the specified coordinates. `[{ latitude: 30.279383, longitude: 120.131441,}]`	-
include-padding	Object	-	Defines padding around the viewport. `{ left:0, right:0, top:0, bottom:0}`	-
ground-overlays	Array	-	Custom ground image overlays. `[{ // Upper right, 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	-	Grid tile image overlays. `{ url:'http://xxx', type:0, // URL type tileWidth:256, tileHeight:256, zIndex:1,}`	-
setting	Object	-	Map display and interaction settings. `{ // Gestures gestureEnable: 1, // Scale showScale: 1, // Compass showCompass: 1, // Two-finger downward swipe tiltGesturesEnabled: 1, // Show traffic conditions trafficEnabled: 0, // Map POI information showMapText: 0, // AMAP logo position logoPosition: { centerX: 150, centerY: 90 }}`	-
onMarkerTap	EventHandle	-	Triggered when a marker is tapped. `{ markerId, latitude, longitude,}`	-
onCalloutTap	EventHandle	-	Triggered when a marker's callout is tapped. `{ markerId, latitude, longitude,}`	-
onControlTap	EventHandle	-	Triggered when a control is tapped. `{ controlId}`	-
onRegionChange	EventHandle	-	Triggered when the field of view changes. `{ type: "begin/end", latitude, longitude, scale}`	-
onTap	EventHandle	-	Triggered when the map is tapped. `{ latitude, longitude,}`	-

markers

Mark specific locations on the map.

Property Name	Description	Type	Required	Notes	Minimum version
id	Marker ID	Number	No	Returned in tap event callbacks.	-
latitude	Latitude	Float	Yes	Range: -90 to 90	-
longitude	Longitude	Float	Yes	Range: -180 to 180	-
title	Marker name	String	No	-	-
iconPath	The icon to display	String	Yes	Image path in the project directory. Paths starting with '/' are relative to the miniapp root.	-
rotate	Rotation angle	Number	No	The clockwise rotation angle. Range: 0 to 360. Default: 0.	-
alpha	Marker opacity	Number	No	Marker opacity. Default: 1 (fully opaque).	-
width	Marker icon width	Number	No	Defaults to the image width.	-
height	Marker icon height	Number	No	Defaults to the image height.	-
callout	Custom popup above the marker	Object	No	Only one callout displays at a time. Bind to onCalloutTap. `{ content:"xxx"}`	-
anchorX	Horizontal anchor point on the marker icon	Double	No	These two parameters must be used in pairs. `anchorX` represents the horizontal value (0-1), and `anchorY` represents the vertical value (0-1). For example: anchorX:0.5, anchorY:1 This indicates the midpoint of the bottom edge.	-
anchorY	Vertical anchor point on the marker icon	Double	No		-
customCallout	Custom callout background Only AMAP styles are supported.	Object	No	`{ "type": 2, "descList": [{ "desc": "Estimated", "descColor": "#333333" }, { "desc": "5 minutes", "descColor": "#108EE9" }, { "desc": "to arrival", "descColor": "#333333" }], "isShow": 1}`	-
iconAppendStr	Text appended to the marker icon	String	No	Combines with the `iconPath` image to generate a composite marker icon.	-
iconAppendStrColor	Color of the appended text	String	No	Default: #33B276	-
fixedPoint	Pins a marker based on a screen position.	Object	No	Pins a marker based on a screen position. `{ //The distance in pixels from the upper-left corner of the map, Number originX:100, originY:100}`	-
markerLevel	Drawing level on the map.	Number	No	Z-index relative to other map overlays.	-
label	Text label on the marker.	Object	No	Multiple labels can display simultaneously. Bind to onMarkerTap. `{ content:"Hello Label", color:"#000000", fontSize:12, borderRadius:3, bgColor:"#ffffff", padding:5,}`	-
style	Custom marker style	Object	No	Customizes marker appearance and content.	-
style					-

polygon

Constructs polygon overlays on the map.

Property	Description	Type	Required	Notes	Supported versions
points	An array of latitude and longitude coordinates	Array	Yes	`[{ latitude: 0, longitude: 0}]`	-
color	Line color	String	No	An 8-digit hexadecimal value. The last two digits represent the alpha value, such as #eeeeeeAA.	-
fillColor	Fill color	String	No	An 8-digit hexadecimal value. The last two digits represent the alpha value, such as #eeeeeeAA.	-
width	Line width	Number	No	-	-

polyline

Draws a line through a series of coordinates.

Property name	Description	Type	Required	Notes	Minimum version
points	An array of latitude and longitude coordinates	Array	Yes	`[{ latitude: 0, longitude: 0}]`	-
color	Line color	String	No	An 8-digit hexadecimal value. The last two digits represent the alpha value, such as #eeeeeeAA.	-
width	Line width	Number	No	-	-
dottedLine	Whether the line is dashed.	Boolean	No	Default: false	-
iconPath	Line texture image path	String	No	Image path in the project directory. Paths starting with '/' are relative to the miniapp root.	-
iconWidth	Texture rendering width	Number	No	-	-
zIndex	Z-index of the overlay	Number	-	-	-
iconPath	Texture	String	-	Image path in the project directory. Paths starting with '/' are relative to the miniapp root. If `iconPath` is specified, `color` is ignored. However, `iconPath` can be used with `colorList`. In this case, the texture floats above the rainbow line. To avoid covering the rainbow line, you can set the background color of the texture image to transparent.	-
colorList	Rainbow line	Array	-	A rainbow line. The segments are based on the `points`. For example, if `points` has 5 points, `colorList` should contain 4 color values. If the number of colors in `colorList` is less than the required number of segments, the remaining line segments use the last specified color. `[ "#AAAAAA", "#BBBBBB"]`	-

circles

Displays circle overlays on the map.

Property	Description	Type	Required	Notes	Supported versions
latitude	Latitude	Float	Yes	Range: -90 to 90	-
longitude	Longitude	Float	Yes	Range: -180 to 180	-
color	Outline color	String	No	An 8-digit hexadecimal value. The last two digits represent the alpha value, such as #eeeeeeAA.	-
fillColor	Fill color	String	No	An 8-digit hexadecimal value. The last two digits represent the alpha value, such as #eeeeeeAA.	-
radius	Radius	Number	Yes	-	-
strokeWidth	Outline width	Number	No	-	-

controls

Displays fixed controls on the map that do not move when panned.

Property name	Description	Type	Required	Notes	Supported versions
id	Control ID	Number	No	The control ID. Returned in tap event callbacks.	-
position	Control position on the map	Object	Yes	Relative to the map position	-
iconPath	The icon to display	String	Yes	Image path in the project directory. Paths starting with '/' are relative to the miniapp root.	-
clickable	Whether the control is clickable.	Boolean	No	Default: false.	-

position

Position and size of a control on the map.

Property name	Description	Type	Required	Notes
left	The distance from the left edge of the map.	Number	No	Default: 0. Unit: px.
top	The distance from the top edge of the map.	Number	No	Default: 0. Unit: px.
width	Control width	Number	No	Defaults to the image width. Unit: px.
height	Control height	Number	No	Defaults to the image height. Unit: px.

callout

A custom bubble window above a marker.

Property name	Description	Type	Required	Notes
content	Content	String	No	Default: null

customCallout

Custom callout background. Only AMAP styles are supported.

Property	Description	Type	Required	Notes
type	Style type	Number	Yes	0: black style. 1: white style. 2: background + text. These styles are illustrated in the figure below.
time	Time	String	Yes	The time value
descList	Description array	Array	Yes	Description array `{ "type": 0, "time": "3", "descList": [{ "desc": "Tap to hail a ride now", "descColor": "#ffffff" }], "isShow": 1}` isShow: 1 to show, 0 to hide.

fixedPoint

Pins a marker to a fixed position on the screen.

Property Name	Description	Type	Required	Notes
originX	Horizontal pixel point	Number	Yes	Pixel offset from the map's top-left corner (starting from 0).
originY	Vertical pixel point	Number	Yes	Pixel offset from the map's top-left corner (starting from 0).

Set latitude and longitude for the map component. If omitted, the map defaults to Beijing coordinates.

Marker style guide

Marker style priority

customCallout, callout, and label are mutually exclusive. The priority is: label > customCallout > callout.
style and icon are mutually exclusive. The priority is: style > iconAppendStr and style > icon.

style

{    type:1,    text1:"Style1",    icon1:'xxx',    icon2:'xxx'}

{    type:2,    text1:"Style2",    icon1:'xxx',    icon2:'xxx'}

{    type:3,    icon:xxx,  // Optional    text:xxx,  // Required    color:xxx,  // Default: #33B276    bgColor:xxx,  // Default: #FFFFFF    gravity:"left/center/right", // Default: center    fontType:"small/standard/large"  // Default: standard}

customCallout

{    "type": 0,    "time": "3",    "descList": [{        "desc": "Tap to hail a ride now",        "descColor": "#ffffff"    }],    "isShow": 1}

{    "type": 1,    "time": "3",    "descList": [{        "desc": "Tap to hail a ride now",        "descColor": "#333333"    }],    "isShow": 1}

{    "type": 2,    "descList": [{        "desc": "Estimated",        "descColor": "#333333"    }, {        "desc": "5 minutes",        "descColor": "#108EE9"    }, {        "desc": "to arrival",        "descColor": "#333333"    }],    "isShow": 1}

isShow: 1 to show, 0 to hide.

label

{    content:"Hello Label",    color:"#000000",    fontSize:16,    borderRadius:5,    bgColor:"#ffffff",    padding:12,}

content: Required
color: Optional. Default: "#000000"
fontSize: Optional. Default: 14
borderRadius: Optional. Default: 20
bgColor: Optional. Default: "#FFFFFF"
padding: Optional. Default: 10

Figure

Sample code

<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
    },{
      iconPath: "/image/green_tri.png",
      id: 10,
      latitude: 30.279383,
      longitude: 120.131441,
      width: 50,
      height: 50,
      customCallout: {
        type: 1,
        time: '1',
      },
      fixedPoint:{
        originX: 400,
        originY: 400,
      },
      iconAppendStr: 'Huanglong Times Square test'
    }],
    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) {
    // Use my.createMapContext to get the map context.
    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 you zoom in or out on the map, reset the data's
    // scale value in the onRegionChange function. Otherwise, if you drag the map area, 
    // the map reloads and the scale reverts to its 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: 113.324520,
      latitude: 23.199994,
      includePoints: [{
        latitude: 23.199994,
        longitude: 113.324520,
      }],
    });
  },
  // Specifies whether the map accepts gesture events. isGestureEnable: 1 means yes, and 0 means no.
  gestureEnable() {
    this.mapCtx.gestureEnable({isGestureEnable:1});
  },
  // Specifies whether to show the map scale. showsScale: 1 means yes, and 0 means no.
  showsScale() {
    this.mapCtx.showsScale({isShowsScale:1});
  },
  // Specifies whether to show the map compass. showsCompass: 1 means yes, and 0 means no.
  showsCompass() {
    this.mapCtx.showsCompass({isShowsCompass:1});
  },
  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,
      }],
    });
  },
})