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 the onRegionChange function before setting the latitude and longitude of the location. Otherwise, the map restores to the original size. See sample codes of regionchange for details.
  • The mini program does not support obtaining the latitude and longitude of the current map.

Sample codes

copy
<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>
copy
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.

Example:

[{

latitude: 1.350428,

longitude: 103.861718,

}]

include-padding

Object

The view is displayed within the map padding.

Example:

[{

left:0, right:0,

top:0, bottom:0

}]

ground-overlays

Array

The ground overlay.

Example:

[{

// Upper right, Lower left

'include-points':[{

latitude: 1.350428,

longitude: 103.861718,

},{

latitude: 1.350928,

longitude: 103.862118,

}],

image:'/image/overlay.png',

alpha:0.25,

zIndex:1

}] 

tile-overlay

Object

The tile overlay.

copy
{
    url:'http://xxx',
    type:0, // URL type
    tileWidth:256,
    tileHeight:256,
    zIndex:1,
}

setting

Object

Settings.

Example:

{

gestureEnable: 1,

showScale: 1,

showCompass: 1,

tiltGesturesEnabled: 1,

trafficEnabled: 0,

showMapText: 0,

logoPosition: {

centerX: 150,

centerY: 90

}

}

onMarkerTap

EventHandle

Call this function when clicking on Marker.

Example:

{

markerId,

latitude,

longitude,

}

onCalloutTap

EventHandle

Call this function when clicking on the tooltip of Marker.

Example:

{

markerId,

latitude,

longitude,

}

onControlTap

EventHandle

Call this function when clicking on control.

Example:

{

controlId

}

onRegionChange

EventHandle

Call this function when the view is changed.

Example:

{

type: "begin/end",

latitude,

longitude,

scale

}

onTap 

EventHandle

Call this function when clicking on the map.

Example:

{

latitude,

longitude,

}

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.

Example:

[{

latitude: 0,

longitude: 0

}]

Array

Yes

color

The stroke color. Use hexadecimal numbers to set colors.

Example: #eeeeeeAA

String

No

fillColor

The fill color. Use hexadecimal numbers to set colors.

Example: #eeeeeeAA

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. 

Example:

[{

latitude: 0,

longitude: 0

}]

Array

Yes

color

The stroke color. Use hexadecimal numbers to set colors.

Example: #eeeeeeAA

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 color. To create the multiple-color polyline, use iconPath and colorList jointly. Set the background of the icon to be transparent so that the multiple-color polyline is not covered.

String

-

circles

Display a circle on the map.

Property

Description

Type

Required

latitudeThe latitude. The value ranges from -90 to 90.Float

Yes

longitudeThe longitude. The value ranges from -180 to 180.Float

Yes

color

The stroke color. Use hexadecimal numbers to set colors.

Example: #eeeeeeAA

String

No

fillColor

The fill color. Use hexadecimal numbers to set colors. 

Example: #eeeeeeAA

String

No

radius

The radius in meters. 

Number

Yes

strokeWidth

The stroke width.

NumberNo

callout Deprecated

The customs tooltip over the location marker.

Property

Description

Type

Required

contentThe content in the tooltip, which is empty by default.  String

No

customCallout Deprecated

The customs background of the tooltip.

Property

Description

Type

Required

type

The style of the background. Valid values are:

  • 0: Black background
  • 1: White background
  • 2: Background and text

Number

Yes

time

The time.

String

Yes

descList

The description array.

Example:

{

"type": 0,

"time": "3",

"descList": [{

"desc": "Click to take a taxi",

"descColor": "#ffffff" }],

"isShow": 1

}

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
{
    type:1,
    text1:"Style1",
    icon1:'xxx',
    icon2:'xxx'
}

map

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

map

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

label

Property

Required

Remark

content

Yes

-
colorNoThe default value is #000000.
fontsizeNoThe default value is 14.
borderRadiusNo

The default value is 20.

bgColorNo

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.

More information

my.createMapContext

MapContext Overview