微信小程序地圖 map

2020-07-22 15:28 更新

微信小程序map

地圖。

屬性名類型默認(rèn)值說(shuō)明最低版本
longitudeNumber 中心經(jīng)度 
latitudeNumber 中心緯度 
scaleNumber16縮放級(jí)別,取值范圍為5-18 
markersArray 標(biāo)記點(diǎn) 
coversArray 即將移除,請(qǐng)使用 markers 
polylineArray 路線 
circlesArray  
controlsArray 控件 
include-pointsArray 縮放視野以包含所有給定的坐標(biāo)點(diǎn) 
show-locationBoolean 顯示帶有方向的當(dāng)前定位點(diǎn) 
bindmarkertapEventHandle 點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā) 
bindcallouttapEventHandle 點(diǎn)擊標(biāo)記點(diǎn)對(duì)應(yīng)的氣泡時(shí)觸發(fā)1.2.0
bindcontroltapEventHandle 點(diǎn)擊控件時(shí)觸發(fā) 
bindregionchangeEventHandle 視野發(fā)生變化時(shí)觸發(fā) 
bindtapEventHandle 點(diǎn)擊地圖時(shí)觸發(fā) 
注意: covers 屬性即將移除,請(qǐng)使用 markers 替代

markers

標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置

屬性說(shuō)明類型必填備注最低版本
id標(biāo)記點(diǎn)idNumbermarker點(diǎn)擊事件回調(diào)會(huì)返回此id 
latitude緯度Number浮點(diǎn)數(shù),范圍 -90 ~ 90 
longitude經(jīng)度Number浮點(diǎn)數(shù),范圍 -180 ~ 180 
title標(biāo)注點(diǎn)名String  
iconPath顯示的圖標(biāo)String項(xiàng)目目錄下的圖片路徑,支持相對(duì)路徑寫法,以'/'開(kāi)頭則表示相對(duì)小程序根目錄;也支持臨時(shí)路徑 
rotate旋轉(zhuǎn)角度Number順時(shí)針旋轉(zhuǎn)的角度,范圍 0 ~ 360,默認(rèn)為 0 
alpha標(biāo)注的透明度Number默認(rèn)1,無(wú)透明 
width標(biāo)注圖標(biāo)寬度Number默認(rèn)為圖片實(shí)際寬度 
height標(biāo)注圖標(biāo)高度Number默認(rèn)為圖片實(shí)際高度 
callout自定義標(biāo)記點(diǎn)上方的氣泡窗口Object{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}1.2.0
label為標(biāo)記點(diǎn)旁邊增加標(biāo)簽Object{color, fontSize, content, x, y},可識(shí)別換行符,x,y原點(diǎn)是marker對(duì)應(yīng)的經(jīng)緯度1.2.0
anchor經(jīng)緯度在標(biāo)注圖標(biāo)的錨點(diǎn),默認(rèn)底邊中點(diǎn)Object{x, y},x表示橫向(0-1),y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點(diǎn)1.2.0

marker 上的氣泡 callout

屬性說(shuō)明類型
content文本String
color文本顏色String
fontSize文字大小Number
borderRadiuscallout邊框圓角Number
bgColor背景色String
padding文本邊緣留白Number
display'BYCLICK':點(diǎn)擊顯示; 'ALWAYS':常顯String

polyline

指定一系列坐標(biāo)點(diǎn),從數(shù)組第一項(xiàng)連線至最后一項(xiàng)

屬性說(shuō)明類型必填備注最低版本
points經(jīng)緯度數(shù)組Array[{latitude: 0, longitude: 0}] 
color線的顏色String8位十六進(jìn)制表示,后兩位表示alpha值,如:#000000AA 
width線的寬度Number  
dottedLine是否虛線Boolean默認(rèn)false 
arrowLine帶箭頭的線Boolean默認(rèn)false,開(kāi)發(fā)者工具暫不支持該屬性1.2.0
borderColor線的邊框顏色String 1.2.0
borderWidth線的厚度Number 1.2.0

circles

在地圖上顯示圓

屬性說(shuō)明類型必填備注
latitude緯度Number浮點(diǎn)數(shù),范圍 -90 ~ 90
longitude經(jīng)度Number浮點(diǎn)數(shù),范圍 -180 ~ 180
color描邊的顏色String8位十六進(jìn)制表示,后兩位表示alpha值,如:#000000AA
fillColor填充顏色String8位十六進(jìn)制表示,后兩位表示alpha值,如:#000000AA
radius半徑Number 
strokeWidth描邊的寬度Number 

controls

在地圖上顯示控件,控件不隨著地圖移動(dòng)

屬性說(shuō)明類型必填備注
id控件idNumber在控件點(diǎn)擊事件回調(diào)會(huì)返回此id
position控件在地圖的位置Object控件相對(duì)地圖位置
iconPath顯示的圖標(biāo)String項(xiàng)目目錄下的圖片路徑,支持相對(duì)路徑寫法,以'/'開(kāi)頭則表示相對(duì)小程序根目錄;也支持臨時(shí)路徑
clickable是否可點(diǎn)擊Boolean默認(rèn)不可點(diǎn)擊

position

屬性說(shuō)明類型必填備注
left距離地圖的左邊界多遠(yuǎn)Number默認(rèn)為0
top距離地圖的上邊界多遠(yuǎn)Number默認(rèn)為0
width控件寬度Number默認(rèn)為圖片寬度
height控件高度Number默認(rèn)為圖片高度

地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認(rèn)值是北京的經(jīng)緯度。

示例:

<!-- map.wxml -->
<map id="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: 300px;"></map>

// map.js
Page({
  data: {
    markers: [{
      iconPath: "/resources/others.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:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 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

  1. tip:map組件是由客戶端創(chuàng)建的原生組件,它的層級(jí)是最高的。
  2. tip: 請(qǐng)勿在scroll-view中使用map組件。
  3. tip:css動(dòng)畫對(duì)map組件無(wú)效。
  4. tip:map組件使用的經(jīng)緯度是火星坐標(biāo)系,調(diào)用wx.getLocation接口需要指定typegcj02

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)