WeChat Mini Program wxapp Map Map Explanation

WeChat Mini Program wxapp map:

map

Attribute Name	Type	Default Value	Description
longitude	Number		Central Longitude
latitude	Number		Central Latitude
scale	Number	1	Zoom Level
markers	Array		Marker
covers	Array		Overlay

Marker

The marker is used to display the position of the marker on the map, and icons and styles cannot be customized

Attribute	Description	Type	Required	Note
latitude	Latitude	Number	Yes	Floating point number, range -90 ~ 90
longitude	Longitude	Number	Yes	Floating point number, range -180 ~ 180
name	Marker name	String	Yes
desc	Detailed description of the marker	String	No

Overlay

Overlay is used to display custom icons on the map, and styles can be customized

Attribute	Description	Type	Required	Note
latitude	Latitude	Number	Yes	Floating point number, range -90 ~ 90
longitude	Longitude	Number	Yes	Floating point number, range -180 ~ 180
iconPath	The displayed icon	String	Yes	The image path under the project directory, supports relative path writing
rotate	Rotation Angle	Number	No	The angle of rotation in clockwise direction, range 0 ~ 360, default is 0

The longitude and latitude of the map component are required, if not filled in, the default value is the longitude and latitude of Beijing.

The markers can only be set when initializing, and do not support dynamic updates.

Example:

!-- map.wxml -->
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
// map.js
Page({
 data: {
  markers: [{
   latitude: 23.099994,
   longitude: 113.324520,
   name: 'T.I.T Creative Park',
   desc: 'I am here now'
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: '../images/car.png',
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: '../images/car.png',
   rotate: 90
  }]
 }
}

Thank you for reading, I hope it can help you. Thank you for your support of this site!