Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use WeChat Mini Programs's map. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

WeChat Mini Programs map

Map.

The default value of the attribute name type indicates that the minimum version longitudeNumber center longitude latitudeNumber center latitude scaleNumber16 zoom level, value range is 5-18markersArray marked point coversArray is about to be removed Please use the markerspolylineArray alignment circlesArray circle controlsArray control include-pointsArray to zoom the field of view to include all given coordinate points show-locationBoolean displays the current anchor point with direction when bindcallouttapEventHandle clicks on the marker point triggers bindcallouttapEventHandle clicks on the bubble corresponding to the marker point triggers the 1.2.0bindcontroltapEventHandle click control triggers when the bindregionchangeEventHandle field of view changes, triggers when bindtapEventHandle clicks on the map

Note: the covers attribute is about to be removed, please use markers instead

Markers

The marked point is used to display the location of the marker on the map

Attribute description type required minimum version id mark dot idNumber No marker Click event callback will return this idlatitude latitude Number is floating point, range-90 ~ 90longitude longitude Number is floating point, range-180 ~ 180title marked name String No iconPath the icon String displayed is the image path under the project directory, supports relative path writing, and starts with'/ 'indicating relative Mini Program root directory. Temporary path rotate rotation angle Number rotation angle is also supported, ranging from 0 to 360. the default is the transparency of 0alpha dimensions. Number defaults to 1. No transparent width callout icon width Number defaults to picture actual width height callout icon height Number defaults to picture actual height bubble window above callout custom marking point Object no {content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display} 1.2.0label adds labels Object next to marked points no {color, fontSize, content, x, y} to recognize newline characters XQuery y origin is the longitude and latitude corresponding to marker. The longitude and latitude of 1.2.0anchor is at the anchor point of the label icon. By default, the midpoint of the bottom edge is not {xPowery}, x is horizontal (0-1), and y is vertical (0-1). {x: .5, y: 1} indicates the midpoint of the bottom edge 1.2.0

Bubble callout on marker

Attribute description type content text Stringcolor text color StringfontSize text size NumberborderRadiuscallout border fillet NumberbgColor background color Stringpadding text edge blank Numberdisplay'BYCLICK': click display; 'ALWAYS': constant display String

Polyline

Specify a series of coordinate points, connecting from the first item to the last item in the array

Attribute description type required remarks minimum version points longitude and latitude array Array is [{latitude: 0, longitude: 0}] Color String No 8-bit hexadecimal representation, the last two bits represent alpha values, such as: # 000000AAwidthline width Number No dottedLine whether dashed line Boolean No default falsearrowLine line with arrow Boolean default false, developer tools do not support the attribute 1.2.0 borderColor line border color String No 1.2.0borderWidth line thickness Number No 1.2.0

Circles

Show circles on the map

Attribute description type required latitude latitude Number is a floating point number, range-90 ~ 90longitude longitude Number is a floating point number, range-180 ~ 180color stroke color String no 8-bit hexadecimal representation, the last two bits represent alpha values, such as # 000000AAfillColor fill color String no 8-bit hexadecimal representation, the last two bits represent alpha values, such as: # 000000AAradius radius Number is the width of the strokeWidth stroke Number No

Controls

Displays the control on the map, and the control does not move with the map

Property description type required remarks id control idNumber whether the callback will return the location of the idposition control on the map Object is the control relative to the map location iconPath displays the icon String is the image path under the project directory, supports the relative path writing, starting with'/ 'indicates the relative root directory of the Mini Program; also supports temporary path whether clickable is clickable or unclickable by default

Position

Attribute description type required remarks how far is left from the left boundary of the map Number whether defaults to 0top from the upper boundary of the map Number defaults to 0width control width Number no defaults to picture width height control height Number defaults to picture height

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

Example:

/ map.jsPage ({data: {markers: [{iconPath: "/ resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50}], polyline: [{longitude: 113.3245211, latitude: 23.10229}, {longitude: 113.324520 Latitude: 23.21229}], color: "# FF0000DD", width: 2, dottedLine: true}], controls: [{id: 1, iconPath:'/ resources/location.png', position: {left: 0, top: 23.21229-50, width: 50, height: 50}, clickable: true}]} Regionchange (e) {console.log (e.type)}, markertap (e) {console.log (e.markerId)}, controltap (e) {console.log (e.controlId)}}) Bug & Tip

The tip:map component is a native component created by the client, and its level is the highest.

Tip: do not use map components in scroll-view.

Tip:css animation is not valid for map components.

The latitude and longitude used by the tip:map component is the Martian coordinate system. To call the wx.getLocation API, you need to specify type as gcj02.

These are all the contents of the article "how to use WeChat Mini Programs's map". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.