Detailed explanation of WeChat applet wxapp map map

WeChat applet wxapp map map:

map

Attribute name	Type	Default value	Description
longitude	Number		Center Longitude
latitude	Number		Center Latitude
scale	Number	1	zoom level
markers	Array		Marked points
covers	Array		Overlay

Marker point

Marker point is used to display the location of the marker on the map. The icon and Style

##latitudeLatitudeNumber isFloating point number, range -90 ~ 90longitudeLongitudeNumber isFloating point number, range -180 ~ 180nameMark the nameString is descDetailed description of the mark pointStringNo

Attribute	Description	Type	Required Fill in	Remark

Overlay

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

AttributeDescriptionTypeRequiredRemarkslatitudeLatitudeNumber is a floating point number, ranging from -90 ~ 90longitudeLongitudeNumber is a floating point number, ranging from -180 ~ 180iconPathThe displayed icon String is the image path in the project directory and supports relative path writing. rotateRotation angleNumberNoThe angle of clockwise rotation, range 0 ~ 360, the default is 0The longitude and latitude of the map component is required. If the longitude and latitude are not filled in, the default value is the longitude and latitude of Beijing.

Markers can only be set during initialization 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: &#39;T.I.T 创意园&#39;,
   desc: &#39;我现在的位置&#39;
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: &#39;../images/car.png&#39;,
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: &#39;../images/car.png&#39;,
   rotate: 90
  }]
 }
})

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

For more WeChat applet wxapp map map detailed explanation and related articles, please pay attention to the PHP Chinese website!