WeChat Mini Program Map Detailed Explanation and Simple Examples

WeChat Mini Program Map

WeChat Mini Program map

MAP

##longitudeNumberCentral longitudelatitudeNumberCentral latitudescaleNumber1zoom levelmarkersArrayMark pointscoversArrayCovering

Attribute Name	Type	Default value	Description

Marker point

Marker point is used to display the location of the marker on the map. The icon and style cannot be customized

AttributesDescriptionTypeRequiredRemarkslatitudeLatitudeNumber is a floating point number, ranging from -90 ~ 90longitudeLongitudeNumber is a floating point number, ranging from -180 ~ 180nameMark the roll callString isdescMarking point detailed descriptionStringNo

Cover

The overlay is used to display custom icons on the map. The icons and styles can be customized

PropertiesDescriptionTypeRequiredRemarks##latitudelongitudeiconPathrotateThe longitude and latitude of the map component is required, if If you do not fill in the longitude and latitude, the default value is the longitude and latitude of Beijing.

Latitude	Number	is a	floating point number, ranging from -90 ~ 90
Longitude	Number	is a	floating point number, ranging from -180 ~ 180
The displayed icon	String	is the image path in the	project directory, supporting relative path writing
Rotation angle	Number	No	The angle of clockwise rotation, range 0 ~ 360, default is 0

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: 'T.I.T 创意园',
   desc: '我现在的位置'
  }],
  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
  }]
 }
})

Bug & Tip

tip: Do not use the map component in scroll-view

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

For more WeChat applet map details and simple examples, please pay attention to the PHP Chinese website!