You can use the <map> tag to embed a map in the applet, so many students may ask, which map is embedded in <map>? I have to ask. Naturally, it is Tencent's map, and it cannot be replaced with other maps (Baidu, Gaode, etc.).
Let's first understand the common attributes of the <map> tag.
longitude: longitude
latitude: latitude
scale: zoom level, the default value is 16, the value range is 5 to 18
controls: the array of controls placed on the map
markers: an array of markers placed on the map
show-location: Display the current location with direction
bindcontroltap: event triggered when the control is clicked
bindmarkertap: event triggered when the marker is clicked
bindregionchange: event triggered when the field of view changes
A <map> tag is placed in the layout file below, and the above attributes are set.
<map longitude="113.324520" latitude="23.099994"
scale="14" controls="{
{controls}}"
bindcontroltap="controltap" markers="{
{markers}}"
bindmarkertap="markertap" polyline="{
{polyline}}"
bindregionchange="regionchange" show-location
style="width: 100%; height: 100%;"/>
The displayed effect is shown in Figure 1.
Figure 1 shows the Tencent map
On the map, a marker (smiley face image) and a control image (smurf image) are displayed. Many students may ask, what is the difference between markers and controls? Can you place images at all? In fact, markers and controls are basically the same, the main difference is only one point, the marker will move with the map, but the control will not move with the map.
In the <map> tag, most attributes use variables. The codes of these variables and corresponding methods are as follows:
Page({
data: {
markers: [{
iconPath: "/image/face.png", // 标记图像
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{ // 在地图上通过经纬度绘制折线
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF00FF",
width: 5,
dottedLine: false
}],
controls: [{
id: 1,
iconPath: '/image/sprite.png', // 控件图像
position: {
left: 0,
top: 260 - 80,
width: 80,
height: 80
},
clickable: true // 设为控件可单击的状态
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
We see that in this code, there are three arrays: markers, polyline and controls. These three arrays all define multiple properties through objects. The attributes in the markers and controls arrays are similar. In the former, each array element represents a marker, and in the latter, an array element represents a control. Each array element in the ployline represents a polyline (each point in the polyline is determined by the latitude and longitude). These polylines (in this case, just a straight line), extend upward from the center of the smiley mark on the top of the head.
You can click on both the control and the mark. After clicking, the log information output in the Console is shown in Figure 2. The id attribute values defined in the markers and controls arrays are respectively output in the log information.
Figure 2 Log information output by clicking the mark and control
If you are interested in this article, you can add teacher Li Ning's WeChat public account (unitymarvel):
Follow the official account of Geek Origin to get more free technical videos and articles.