Name	Type	Default Value	Mandatory	Description
latitude	number	39.9153935	Yes	Latitude of the map's center point. The default value is the latitude of Tiananmen. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
longitude	number	116.4041457	Yes	Longitude of the map's center point. The default value is the longitude of Tiananmen. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
scale	number	16	No	Zoom level. The value ranges from 2 to 20.
markers	Array<marker>	-	No	Marker. For details, see Marker Description.
circles	Array<circle>	-	No	Circle.
polyline	Array<polyline>	-	No	Route.
show-location	boolean	FALSE	No	Whether to display the current location.
bindtap	event	-	No	Event triggered when the map is tapped.
bindmarkertap	event	-	No	Event triggered when a marker is tapped, with e.detail = {markerId}.
bindupdated	event	-	No	Event triggered when map rendering update is complete.
bindregionchange	event	-	No	Event triggered when the field of view changes. Since: 1.0.8
bindcallouttap	event	-	No	Event triggered when the bubble corresponding to the marker is tapped, with e.detail = {markerId}. Since: 1.0.10

Return values of bindregionchange

Name	Type	Description
type	string	Event type. begin: triggered when the field of view begins to change. end: triggered when the field of view finishes changing.
causedBy	string	Reason why the field of view changes. drag: dragging the map. scale: scaling the map. update: API call.

Name

Type

Description

type

string

Event type.

begin: triggered when the field of view begins to change.
end: triggered when the field of view finishes changing.

causedBy

string

Reason why the field of view changes.

drag: dragging the map.
scale: scaling the map.
update: API call.

[h2]Marker Description

Name	Type	Default Value	Mandatory	Description
id	number	-	Yes	Marker ID, which is returned in the marker tap event callback.
latitude	number	-	Yes	Latitude. The value is a floating point number ranging from –90 to +90. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
longitude	number	-	Yes	Longitude. The value is a floating point number ranging from –180 to +180. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
title	string	-	No	Marker title, which is displayed when a marker is tapped. Since 1.0.10, the callout property is supported. If callout exists, title will be ignored.
zIndex	number	-	No	Stacking order of the element.
iconPath	string	-	Yes	Icon path, which can be a network path, local path, or code package path.
rotate	number	0	No	Clockwise rotation angle. The value ranges from 0 to 360. The default value is 0.
alpha	number	1	No	Marker transparency. The value ranges from 0 to 1. The default value is 1 (opaque).
anchor	Object	-	No	Anchor point of a marker icon, which corresponds to a specific pair of latitude and longitude. The default value maps the midpoint of the bottom edge of the icon. The value format is {x, y}, where x indicates the horizontal position, with a value range of 0 to 1, and y indicates the vertical position, with a value range of 0 to 1. For example, {x: 0.5, y: 1} indicates the midpoint of the icon bottom edge.
clickable	boolean	FALSE	No	Whether a marker can be tapped. The default value is false. If an invalid value is passed, the default value is used. true: yes; false: no.
callout	Object	-	No	Bubble window displayed above the marker. Since: 1.0.10
label	Array<Object>	-	No	Label added next to the marker. Since: 1.0.10

[h2]callout Description

Name	Type	Default Value	Mandatory	Description
content	string	-	No	Text.
padding	number	0	No	Padding of the text.
bgColor	string	#FFFFFF (white)	No	Background color.
color	string	#000000 (black)	No	Text color.
fontSize	number	15	No	Font size.
weight	string	Normal	No	Font weight. Valid values: Lighter: thinner than Normal Normal: standard font weight Regular: same as Normal Medium: slightly thicker than Normal Bold: significantly thicker Bolder: extremely thick
fontStyle	string	Normal	No	Title font style. Valid values: Normal: standard font style Italic: italic
textAlign	string	center	No	Text alignment mode. Valid values: Start: left-aligned End: right-aligned Center: centered
borderWidth	number	0	No	Stroke width.
borderColor	string	#FFFFFF (white)	No	Stroke color.
borderRadius	number	0	No	Corner radius.

[h2]label Description

Name	Type	Default Value	Mandatory	Description
content	string	-	Yes	Text.
color	string	#000000 (black)	No	Title font color.
fontSize	number	15	No	Title font size.
strokeColor	string	#FFFFFF (white)	No	Title stroke color.
strokeWidth	number	2	No	Title stroke width. The value must be greater than 0 and less than or equal to 10.
fontStyle	string	REGULAR	No	Title font style. Valid values: REGULAR: normal BOLD: bold ITALIC: italic BOLD_ITALIC: bold italic MEDIUM: medium MEDIUM_ITALIC: medium italic

[h2]Circle Description

Name	Type	Default Value	Mandatory	Description
latitude	number	-	Yes	Latitude. The value is a floating point number ranging from –90 to +90. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
longitude	number	-	Yes	Longitude. The value is a floating point number ranging from –180 to +180. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
color	string	#000000ff	No	Stroke color.
fillColor	string	#00000000	No	Filling color.
radius	number	-	Yes	Radius of a circle, in meters.
strokeWidth	number	3	No	Stroke width, in px.
zIndex	number	-		Z-axis index, which is used to describe element overlapping relationships.

[h2]polyline Description

Name	Type	Default Value	Mandatory	Description
points	array	-	Yes	Longitude-latitude array, which is in the [{latitude: 0, longitude: 0}] format. NOTE: For regions within the Chinese mainland, Hong Kong (China), and Macao (China), use the GCJ02 coordinate system. For all other regions, use the WGS84 coordinate system.
color	Color	"#000000ff"	No	Color of a polyline.
zIndex	number	-	No	Z-axis coordinate.

Example

HXML file:

<view>
  <map
    id="map"
    style="width: 100%; height: 100vh"
    circles="{{circles}}"
    latitude="{{latitude}}"
    longitude="{{longitude}}"
    markers="{{markers}}"
    polyline="{{polyline}}"
    scale="{{scale}}"
    show-location="{{showLocation}}"
    bindmarkertap="bindmarkertap"
    bindtap="bindtap"
    bindupdated="bindupdated"/>
</view>

JS code:

Page({
  data: {
    showLocation: true,
    circles: [
      {
        latitude: 23.306574,
        longitude: 113.324587,
        radius: 1230,
        fillColor: "#ffcd2222",
        color: "#ff369b1d",
        strokeWidth: 10,
        zIndex: 15,
      },
    ],
    latitude: 23.106574,
    longitude: 113.324587,
    scale: 10,
    markers: [
      {
        id: 0,
        latitude: 23.13065, // Latitude
        longitude: 113.3274, // Longitude
        zIndex: 1,
        iconPath: "xxx/xxx.png", // Icon path
        rotate: 10, // Rotation angle
        title: "I am here,0", // Marker title
        alpha: 0.5, // Transparency
        anchor: { x: 0.5, y: 1 },
        clickable: true,
        callout: {
          content: 'callout title',
          color: 'red',
          padding:5,
          fontSize: 14,
          weight:'',
          fontStyle:'Normal',
          borderWidth: 2,
          borderRadius: 10,
          borderColor: 'blue',
          bgColor: 'white',
          textAlign: 'Center',
        },
        label:[
          {
            content: 'label title',
            color:'red',
            fontSize: 14,
            strokeColor: 'blue',
            strokeWidth:1,
            fontStyle:1,
          }
        ]
      },
    ],
    polyline: [
      {
        points: [
          {
            latitude: 23.106574,
            longitude: 113.324587,
          },
          {
            latitude: 23.13065,
            longitude: 113.3274,
          },
        ],
        color: "#ff369b1d",
        zIndex: 0,
      },
    ],
  },
  bindmarkertap(e) {
    console.log("markertap mark=", e);
  },
  bindtap(e) {
    console.log("bindtap mark=", e);
  },
  bindupdated(e) {
    console.log("bindupdated mark=", e);
  },
});

目录

Map

Properties

[h2]Marker Description

[h2]callout Description

[h2]label Description

[h2]Circle Description

[h2]polyline Description

Example