Puede usar la etiqueta <map> para incrustar un mapa en el subprograma, por lo que muchos estudiantes pueden preguntar, ¿qué mapa está incrustado en <map>? Tengo que preguntar. Naturalmente, es el mapa de Tencent, y no se puede reemplazar con otros mapas (Baidu, Gaode, etc.).
Primero comprendamos los atributos comunes de la etiqueta <map>.
longitude: longitud
latitud: latitud
escala: nivel de zoom, el valor predeterminado es 16, el rango de valores es de 5 a 18
controles: la matriz de controles colocados en el mapa
marcadores: una serie de marcadores colocados en el mapa
show-location: muestra la ubicación actual con dirección
bindcontroltap: evento que se activa cuando se hace clic en el control
bindmarkertap: evento que se activa cuando se hace clic en el marcador
bindregionchange: evento que se activa cuando cambia el campo de visión
Se coloca una etiqueta <map> en el archivo de diseño siguiente y se establecen los atributos anteriores.
<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%;"/>
El efecto mostrado se muestra en la Figura 1.
La figura 1 muestra el mapa de Tencent
En el mapa, se muestran un marcador (imagen de cara sonriente) y una imagen de control (imagen de pitufo). Muchos estudiantes pueden preguntar, ¿cuál es la diferencia entre marcadores y controles? ¿Puedes colocar imágenes en absoluto? De hecho, los marcadores y controles son básicamente los mismos, la principal diferencia es solo un punto, el marcador se moverá con el mapa, pero el control no se moverá con el mapa.
En la etiqueta <map>, la mayoría de los atributos utilizan variables. Los códigos de estas variables y los métodos correspondientes son los siguientes:
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)
}
})
Vemos que en este código, hay tres matrices: marcadores, polilínea y controles. Todas estas tres matrices definen múltiples propiedades a través de objetos. Los atributos en los arreglos de marcadores y controles son similares: en el primero, cada elemento del arreglo representa un marcador y en el segundo, un elemento del arreglo representa un control. Cada elemento de la matriz en la ployline representa una polilínea (cada punto de la polilínea está determinado por la latitud y la longitud). Estas polilíneas (en este caso, solo una línea recta), se extienden hacia arriba desde el centro de la marca sonriente en la parte superior de la cabeza.
Puede hacer clic tanto en el control como en la marca. Después de hacer clic, la salida de información de registro en la consola se muestra en la Figura 2. Los valores del atributo id definidos en las matrices de marcadores y controles se muestran respectivamente en la información de registro.
Figura 2 Salida de información de registro haciendo clic en la marca y control
Si está interesado en este artículo, puede agregar la cuenta pública de WeChat del profesor Li Ning (unitymarvel):
Siga la cuenta oficial de Geek Origin para obtener más videos y artículos técnicos gratuitos.