Map

createMapContext

TIP

The API usage is as follows: wx.createMapContext(string mapId, Object this)

• Functional description: Create a map context MapContext object
• Parameters and descriptions:
  • string mapId，map Component id
  • Object this，Under the custom component, this of the current component instance, to operate the component map Component
• Return value: MapContext

MapContext

TIP

• If there is no special instruction, the default support of MapContext method for mobile phone manufacturers is System map (only iOS support): yes
• Google map (Android, IDE support): yes
• Huawei map (only Android support): yes
• Tencent map: yes
• Baidu map: yes
• Amap: yes

• MapContext instance, you can use wx.createMapContext obtain.
• MapContext to bind to a map MapContext to bind to a mapComponent
• Sample code:

<!-- map.wxml -->
<map id="myMap" show-location />

<button type="primary" bindtap="getCenterLocation">Get Location</button>
<button type="primary" bindtap="moveToLocation">Move location</button>
<button type="primary" bindtap="translateMarker">Move annotations</button>
<button type="primary" bindtap="includePoints">Zoom in to show all latitude and longitude</button>

<!-- map.wxml -->
// map.js
Page({
  onReady: function (e) {
    // Use wx.createMapContext to get map context.
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 0,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})

.addArc

TIP

The API usage is as follows: MapContext.addArc(Object object)

TIP

Support: Not supported

• Functional description: When adding an arc, you must set one of the waypoints and the angle. The waypoints must be within the valid coordinate range of the start and end points, otherwise the correct arc cannot be generated. When setting the angle, the angle is used as the standard. The angle is defined as the angle from the start point to the end point, and the angle rotated counterclockwise with the external tangent of the start point. The tool side does not support it yet.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  id	number	-	Yes	Arc id
  start	Object	-	Yes	Start point
  end	Object	-	Yes	End point
  pass	Object	-	No	Waypoint
  angle	number	0	No	Angle angle
  width	number	5	No	Line width
  color	number	#000000	No	Line color
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• start structure attribute

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

• end structure attribute

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

• pass structure attribute

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

.addCustomLayer

TIP

The API usage is as follows: MapContext.addCustomLayer(Object object)

TIP

Support: Not supported

• Functional description: Add personalized layer. Layer creationReference documentation.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  layerId	string	-	Yes	Personalized layer id
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.addGroundOverlay

TIP

The API usage is as follows: MapContext.addGroundOverlay(Object object)

TIP

Support: IDE support, Android and iOS do not support

• Functional description: Create a custom image layer, the image will scale with the map zoom.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  id	String	-	Yes	Image layer id
  src	String	-	Yes	Image path, support network images, temporary paths, code package paths
  bounds	Object	-	Yes	The latitude and longitude range covered by the image
  visible	Boolean	true	No	Is it visible
  zIndex	Number	1	No	Layer drawing order
  opacity	Number	1	No	Layer transparency
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  • bounds structure attribute

    Structure properties	Type	Default value	Required	Description
    southwest	Object	-	Yes	Southwest corner longitude and latitude
    northeast	Object	-	Yes	Northeast corner longitude and latitude

    • southwest structure attribute

      Structure properties	Type	Default value	Required	Description
      longitude	number	-	Yes	Longitude
      latitude	number	-	Yes	Latitude

    • northeast structure attribute

      Structure properties	Type	Default value	Required	Description
      longitude	number	-	Yes	Longitude
      latitude	number	-	Yes	Latitude

.addMarkers

TIP

The API usage is as follows: MapContext.addMarkers(Object object)

• Functional description: Add marker.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  markers	array	-	Yes	Same as the marker attribute passed into the map component
  clear	Boolean	false	No	Whether to clear all markers on the map first
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.eraseLines

TIP

The API usage is as follows: MapContext.eraseLines(Object object)

• Functional description: Erase or gray out the line segments added to the map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  lines	Array.<Object>	-	Yes	Erase line segment array, seepolyline Properties
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  • lines structure attribute

    Structure properties	Type	Default value	Required	Description
    id	number	-	Yes	Line segment id
    index	number	-	Yes	Specify a segment of the line segment, the starting index of the line segment is 8
    point	Object	-	Yes	Specify a point in a segment of the line segment
    clear	boolean	true	No	True means erase, false means gray

    • point structure attribute

      Structure properties	Type	Default value	Required	Description
      longitude	number	-	Yes	Longitude
      latitude	number	-	Yes	Latitude

.fromScreenLocation

TIP

The API usage is as follows: MapContext.fromScreenLocation(Object object)

• Functional description: Get the longitude and latitude corresponding to the point on the screen, the origin of the coordinates is the upper left corner of the map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  x	number	-	Yes	x coordinate value
  y	number	-	Yes	y coordinate value
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

.getCenterLocation

TIP

The API usage is as follows: MapContext.getCenterLocation(Object object)

• Functional description: Get the longitude and latitude of the center of the current map. The returned coordinate system is gcj02, which can be used forwx.openLocation()

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  iconPath	string	-	No	icon path, supporting network path, local path, code package path
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

.getRegion

TIP

The API usage is as follows: MapContext.getRegion(Object object)

• Functional description: Get the field of view of the current map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Structure properties	Type	Description
  southwest	Object	Southwest corner longitude and latitude
  northeast	Object	Northeast corner longitude and latitude

  • southwest structure attribute

    Structure properties	Type	Description
    longitude	number	Longitude
    latitude	number	Latitude

  • northeast structure attribute

    Structure properties	Type	Description
    longitude	number	Longitude
    latitude	number	Latitude

.getRotate

TIP

iosNot supported

TIP

The API usage is as follows: MapContext.getRotate(Object object)

• Functional description: Get the rotation angle of the current map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Properties	Type	Description
  rotate	number	Rotation angle

.getScale

TIP

The API usage is as follows: MapContext.getScale(Object object)

• Functional description: Get the zoom level of the current map

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Properties	Type	Description
  scale	number	Zoom value

.getSkew

TIP

iosNot supported

TIP

The API usage is as follows: MapContext.getSkew(Object object)

• Functional description: Get the tilt angle of the current map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Properties	Type	Description
  skew	number	Tilt angle

.includePoints

TIP

iosNot supported

TIP

The API usage is as follows: MapContext.includePoints(Object object)

• Functional description: Zoom the field of view to display all longitude and latitude.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  points	array	-	Yes	A list of coordinate points to be displayed in the visible area
  padding	array	-	No	The distance from the edge of the rectangle formed by the coordinate points to the edge of the map, unit: pixel. The format is [top, right, bottom, left]. Only the first item of the array can be recognized on Android, and the padding of the top, bottom, left and right is consistent. The developer tool does not currently support the padding parameter.
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  pointsStructure properties

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

.initMarkerCluster

TIP

The API usage is as follows: MapContext.moveAlong(Object object)

• Functional description: Initialize the configuration of point aggregation, and use the default configuration when not called.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  enableDefaultStyle	boolean	true	No	Enable the default aggregation style
  zoomOnClick	boolean	true	No	Whether to achieve aggregation separation when clicking on an already aggregated marker point
  gridSize	number	60	No	The aggregation distance of the aggregation algorithm, that is, points with a distance less than this value will be aggregated together, in pixels
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.moveAlong

TIP

The API usage is as follows: MapContext.initMarkerCluster(Object object)

• Functional description: Move the marker along the specified path for scenes such as trajectory playback. The callback event is triggered when the animation is completed. If the animation is in progress, the moveAlong method is called again for the same marker, and the previous animation will be interrupted.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  markerId	number	-	Yes	Specify the marker
  path	array	-	Yes	The coordinate string of the moving path, the coordinate point format is {longitude, latitude}
  autoRotate	boolean	true	No	Automatically change the rotation angle of the marker according to the path direction
  duration	number	-	Yes	The time of smooth movement
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.moveToLocation

TIP

The API usage is as follows: MapContext.moveToLocation(Object object)

• Functional description: Move the center of the map to the current positioning point. At this time, you need to set the map component show-location to true.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  longitude	number	-	No	Longitude
  latitude	number	-	No	Latitude
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.on

TIP

The API usage is as follows: MapContext.on(string event, function callback)

• Functional description: Listen to map events

• Parameter1: visualLayerEvent，Visual layer visualLayer unified callback export, supported from 1.5.16.

  Parameter	Type	Description
  layerId	String	Layer id
  eventType	String	Event type
  eventInfo	String	Event information

• Parameter2: markerClusterCreate，Triggered when zooming or dragging causes a new aggregation cluster to be generated, and only the newly created aggregation cluster information is returned.

  Parameter	Type	Description
  clusters	Array<ClusterInfo>	Cluster data

• Parameter3: markerClusterClick, Cluster click event.

  Parameter	Type	Description
  cluster	ClusterInfo	Cluster

  • ClusterInfo structure

  Parameter	Type	Description
  clusterId	Number	Cluster ID
  center	LatLng	Cluster coordinates
  markerIds	Array<Number>	Point marker data array within the cluster

• Parameter4: string event, Event name;; function callback，Event callback function.

  • Legal values markerClusterCreate、markerClusterClick、visualLayerEvent。

• Sample code:

MapContext.on('visualLayerEvent', (res) => {})
MapContext.on('markerClusterCreate', (res) => {})
MapContext.on('markerClusterClick', (res) => {})

.openMapApp

TIP

The API usage is as follows: MapContext.openMapApp(Object object)

• Functional description: Pull up the map app and select navigation.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Destination longitude
  latitude	number	-	Yes	Destination latitude
  destination	string	-	Yes	Destination name
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.removeArc

TIP

The API usage is as follows: MapContext.removeArc(Object object)

TIP

Support: Not supported

• Functional description: Delete arc.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  id	number	-	Yes	Arc ID
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.removeCustomLayer

TIP

The API usage is as follows: MapContext.removeCustomLayer(Object object)

TIP

Support: Not supported

• Functional description: Remove personalized layer.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  layerId	string	-	Yes	Personalized layer ID
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.removeGroundOverlay

TIP

The API usage is as follows: MapContext.removeGroundOverlay(Object object)

TIP

Support: IDE support, Android and iOS do not support

• Functional description: Remove the custom image layer

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  id	string	-	Yes	Image layer id
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.removeMarkers

TIP

The API usage is as follows: MapContext.removeMarkers(Object object)

• Functional description: Remove marker.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  markerIds	array	-	Yes	Marker ID collection
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.setBoundary

TIP

The API usage is as follows: MapContext.setBoundary(Object object)

• Functional description: Limit the display range of the map. This interface also limits the minimum zoom integer level of the map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  southwest	Object	-	Yes	Southwest corner longitude and latitude
  northeast	Object	-	Yes	Northeast corner longitude and latitude
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• southwest structure attribute

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

• northeast structure attribute

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

.setCenterOffset

TIP

The API usage is as follows: MapContext.setCenterOffset(Object object)

• Functional description: Set the center point offset of the map, backward and downward is growth, screen ratio range (0.25~0.75), default offset is [0.5, 0.5].

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  offset	Array.<number>	-	Yes	Offset, two-digit array
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.setLocMarkerIcon

TIP

The API usage is as follows: MapContext.setLocMarkerIcon(Object object)

• Functional description: Set the positioning point icon, support network path, local path, code package path.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  iconPath	string	-	Yes	icon path, supporting network path, local path, code package path
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

.toScreenLocation

TIP

The API usage is as follows: MapContext.toScreenLocation(Object object)

• Functional description: Get the screen coordinates corresponding to the longitude and latitude, the coordinate origin is the upper left corner of the map.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Properties	Type	Description
  x	number	x coordinate value
  y	number	y coordinate value

.translateMarker

TIP

The API usage is as follows: MapContext.translateMarker(Object object)

• Functional description: Translate the marker, iOS and IDE support animation effects, Android platform does not support it yet.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  markerId	number	-	Yes	Specify the marker
  destination	object	-	Yes	Specify the target point to which the marker moves
  animationEnd	function	-	No	Animation end callback function
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• Destination structure attribute

  Structure properties	Type	Default value	Required	Description
  longitude	number	-	Yes	Longitude
  latitude	number	-	Yes	Latitude

.updateGroundOverlay

TIP

The API usage is as follows: MapContext.updateGroundOverlay(Object object)

TIP

Support: IDE support, Android and iOS do not support

• Functional description: Update the custom image layer.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  id	String	-	Yes	Image layer id
  src	String	-	Yes	Image path, support network images, temporary paths, code package paths
  bounds	Object	-	Yes	The latitude and longitude range covered by the image
  visible	Boolean	true	No	Is it visible
  zIndex	Number	1	No	Layer drawing order
  opacity	Number	1	No	Layer transparency
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  • bounds structure attribute

    Structure properties	Type	Default value	Required	Description
    southwest	Object	-	Yes	Southwest corner longitude and latitude
    northeast	Object	-	Yes	Northeast corner longitude and latitude

    • southwest structure attribute

      Structure properties	Type	Default value	Required	Description
      longitude	number	-	Yes	Longitude
      latitude	number	-	Yes	Latitude

    • northeast structure attribute

      Structure properties	Type	Default value	Required	Description
      longitude	number	-	Yes	Longitude
      latitude	number	-	Yes	Latitude