WeChat Mini Program Map Detailed Explanation and Simple Examples

WeChat Mini Program Map

WeChat Mini Program map

MAP

##longitude Number Central longitude latitude Number Central latitude scale Number 1 zoom level markers Array Mark points covers Array Covering

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

Attributes Description Type Required Remarks latitude Latitude Number is a floating point number, ranging from -90 ~ 90 longitude Longitude Number is a floating point number, ranging from -180 ~ 180 name Mark the roll call String is desc Marking point detailed description String No

Cover

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

Properties Description Type Required Remarks ##latitude longitude iconPath rotate The 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.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!