微信小程序 地圖 組件

時間  2021-08-13
標籤 git 小程序 後端 微信小程序 api 數組 微信 網絡 ide 工具 欄目 Git 简体版
原文   原文鏈接

完整微信小程序(Java後端) 技術貼目錄清單頁面（必看）git

地圖（v2.7.0 起支持同層渲染，相關api wx.createMapContext。小程序

小程序解決方案後端

除本章節介紹的小程序地圖基礎屬性外，騰訊位置服務推出《微信小程序解決方案》，從檢索API、基礎地圖組件、個性化、插件、行業方案等多個層面，爲不一樣場景需求的小程序開發者提供完整的地圖能力。微信小程序

個性化地圖api

個性化地圖樣式是騰訊位置服務開放的一項高級能力，開發者能夠根據自身產品的使用場景，UI風格， 選取或者建立風格匹配的地圖樣式。小程序內地圖組件應使用同一 subkey，可經過 layer-style（位置服務官網設置的樣式 style 編號）屬性配置，並支持動態切換樣式。 組件屬性的長度單位默認爲px，2.4.0起支持傳入單位(rpx/px)。詳情見：個性化地圖使用指南數組

小程序插件微信

騰訊位置服務基於微信提供的小程序插件能力，專一於（圍繞）地圖功能，打造一系列小程序插件，能夠幫助開發者簡單、快速的構建小程序，是您實現地圖功能的最佳夥伴。目前插件提供路線規劃、地鐵圖、地圖選點服務，詳情見：小程序地圖插件使用指南。網絡

地圖檢索ide

騰訊位置服務在微信開放社區的服務平臺上線了一系列地圖檢索服務，包含4個POI數據類（逆地址解析、地址解析、地點搜索、關鍵詞輸入提示）、2個路線規劃類（駕車路線規劃、步行路線規劃）、1個座標工具類（座標轉換），覆蓋了絕大部分地圖應用場景。或者登錄位置服務官網的Webservice使用指南瞭解詳細介紹。 微信小程序開發者可使用海外地圖進行展現，若須要海外檢索能力，可在海外位置服務進行申請。工具

小程序示例中心

包含Map組件、API、插件等功能使用方法，全面瞭解小程序下的全部地圖能力。示例內容源碼開放，下降各位開發者接入成本。

 

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pA6Y15o8-1623278170717)(image-20210610055134026.png)]

近期新增功能

  1. 支持點聚合，適用於marker過多場景。
  2. 支持彩虹蚯蚓線，經常使用於路線規劃場景。
  3. 覆蓋物支持調整與其它地圖元素的壓蓋關係。
  4. 支持marker（小車）平移動畫，適用於軌跡回放場景。

地圖基礎屬性

屬性 類型 默認值 必填 說明 最低版本
longitude number   是 中心經度 1.0.0
latitude number   是 中心緯度 1.0.0
scale number 16 否 縮放級別，取值範圍爲3-20 1.0.0
min-scale number 3 否 最小縮放級別 2.13.0
max-scale number 20 否 最大縮放級別 2.13.0
markers Array.   否 標記點 1.0.0
covers Array.   否 即將移除，請使用 markers 1.0.0
polyline Array.   否 路線 1.0.0
circles Array.   否 圓 1.0.0
controls Array.   否 控件（即將廢棄，建議使用 cover-view 代替） 1.0.0
include-points Array.   否 縮放視野以包含全部給定的座標點 1.0.0
show-location boolean false 否 顯示帶有方向的當前定位點 1.0.0
polygons Array.   否 多邊形 2.3.0
subkey string   否 個性化地圖使用的key 2.3.0
layer-style number 1 否 個性化地圖配置的 style，不支持動態修改  
rotate number 0 否 旋轉角度，範圍 0 ~ 360, 地圖正北和設備 y 軸角度的夾角 2.5.0
skew number 0 否 傾斜角度，範圍 0 ~ 40 , 關於 z 軸的傾角 2.5.0
enable-3D boolean false 否 展現3D樓塊(工具暫不支持） 2.3.0
show-compass boolean false 否 顯示指南針 2.3.0
show-scale boolean false 否 顯示比例尺，工具暫不支持 2.8.0
enable-overlooking boolean false 否 開啓俯視 2.3.0
enable-zoom boolean true 否 是否支持縮放 2.3.0
enable-scroll boolean true 否 是否支持拖動 2.3.0
enable-rotate boolean false 否 是否支持旋轉 2.3.0
enable-satellite boolean false 否 是否開啓衛星圖 2.7.0
enable-traffic boolean false 否 是否開啓實時路況 2.7.0
enable-poi boolean true 否 是否展現 POI 點 2.14.0
enable-building boolean   否 是否展現建築物 2.14.0
setting object   否 配置項 2.8.2
bindtap eventhandle   否 點擊地圖時觸發，2.9.0起返回經緯度信息 1.0.0
bindmarkertap eventhandle   否 點擊標記點時觸發，e.detail = {markerId} 1.0.0
bindlabeltap eventhandle   否 點擊label時觸發，e.detail = {markerId} 2.9.0
bindcontroltap eventhandle   否 點擊控件時觸發，e.detail = {controlId} 1.0.0
bindcallouttap eventhandle   否 點擊標記點對應的氣泡時觸發e.detail = {markerId} 1.2.0
bindupdated eventhandle   否 在地圖渲染更新完成時觸發 1.6.0
bindregionchange eventhandle   否 視野發生變化時觸發， 2.3.0
bindpoitap eventhandle   否 點擊地圖poi點時觸發，e.detail = {name, longitude, latitude} 2.3.0
bindanchorpointtap eventhandle   否 點擊定位標時觸發，e.detail = {longitude, latitude} 2.13.0

regionchange 返回值

視野改變時，regionchange 會觸發兩次，返回的 type 值分別爲 begin 和 end。

2.8.0 起 begin 階段返回 causedBy，有效值爲 gesture（手勢觸發） & update（接口觸發）

2.3.0 起 end 階段返回 causedBy，有效值爲 drag（拖動致使）、scale（縮放致使）、update（調用更新接口致使）。

e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}

setting

提供 setting 對象統一設置地圖配置。同時對於一些動畫屬性如 rotate 和 skew，經過 setData 分開設置時沒法同時生效，需經過 settting 統一修改。

// 默認值
const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: 1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}

this.setData({
  // 僅設置的屬性會生效，其它的不受影響
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

marker

標記點用於在地圖上顯示標記的位置

屬性 說明 類型 必填 備註 最低版本
id 標記點 id number 否 marker 點擊事件回調會返回此 id。建議爲每一個 marker 設置上 number 類型 id，保證更新 marker 時有更好的性能。  
clusterId 聚合簇的 id Number 否 自定義點聚合簇效果時使用  
joinCluster 是否參與點聚合 Boolean 否 默認不參與點聚合  
latitude 緯度 number 是 浮點數，範圍 -90 ~ 90  
longitude 經度 number 是 浮點數，範圍 -180 ~ 180  
title 標註點名 string 否 點擊時顯示，callout存在時將被忽略  
zIndex 顯示層級 number 否   2.3.0
iconPath 顯示的圖標 string 是 項目目錄下的圖片路徑，支持網絡路徑、本地路徑、代碼包路徑（2.3.0）  
rotate 旋轉角度 number 否 順時針旋轉的角度，範圍 0 ~ 360，默認爲 0  
alpha 標註的透明度 number 否 默認 1，無透明，範圍 0 ~ 1  
width 標註圖標寬度 number/string 否 默認爲圖片實際寬度  
height 標註圖標高度 number/string 否 默認爲圖片實際高度  
callout 標記點上方的氣泡窗口 Object 否 支持的屬性見下表，可識別換行符。 1.2.0
customCallout 自定義氣泡窗口 Object 否 支持的屬性見下表  
label 爲標記點旁邊增長標籤 Object 否 支持的屬性見下表，可識別換行符。 1.2.0
anchor 經緯度在標註圖標的錨點，默認底邊中點 Object 否 {x, y}，x 表示橫向(0-1)，y 表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點 1.2.0
aria-label 無障礙訪問，（屬性）元素的額外描述 string 否   2.5.0

marker 上的氣泡 callout

屬性 說明 類型 最低版本
content 文本 string 1.2.0
color 文本顏色 string 1.2.0
fontSize 文字大小 number 1.2.0
borderRadius 邊框圓角 number 1.2.0
borderWidth 邊框寬度 number 2.3.0
borderColor 邊框顏色 string 2.3.0
bgColor 背景色 string 1.2.0
padding 文本邊緣留白 number 1.2.0
display ‘BYCLICK’:點擊顯示; ‘ALWAYS’:常顯 string 1.2.0
textAlign 文本對齊方式。有效值: left, right, center string 1.6.0
anchorX 橫向偏移量，向右爲正數 number 2.11.0
anchorY 縱向偏移量，向下爲正數 number 2.11.0

marker 上的自定義氣泡 customCallout

customCallout 存在時將忽略 callout 與 title 屬性。自定義氣泡採用採用 cover-view 定製，靈活度更高。

屬性 說明 類型 最低版本
display ‘BYCLICK’:點擊顯示; ‘ALWAYS’:常顯 string 2.12.0
anchorX 橫向偏移量，向右爲正數 number 2.12.0
anchorY 縱向偏移量，向下爲正數 number 2.12.0

使用方式以下，map 組件下添加名爲 callout 的 slot 節點，其內部的 cover-view 經過 marker-id 屬性與 marker 綁定。當 marker 建立時，該 cover-view 顯示的內容將做爲 callout 顯示在標記點上方。

<map>
  <cover-view slot="callout">
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

示例DEMO： https://developers.weixin.qq.com/s/cZWIojm47pjN

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FePZz5Vw-1623278170721)(image-20210610055211178.png)]

marker 上的氣泡 label

屬性 說明 類型 最低版本
content 文本 string 1.2.0
color 文本顏色 string 1.2.0
fontSize 文字大小 number 1.2.0
x label的座標（廢棄） number 1.2.0
y label的座標（廢棄） number 1.2.0
anchorX label的座標，原點是 marker 對應的經緯度 number 2.1.0
anchorY label的座標，原點是 marker 對應的經緯度 number 2.1.0
borderWidth 邊框寬度 number 1.6.0
borderColor 邊框顏色 string 1.6.0
borderRadius 邊框圓角 number 1.6.0
bgColor 背景色 string 1.6.0
padding 文本邊緣留白 number 1.6.0
textAlign 文本對齊方式。有效值: left, right, center string 1.6.0

點聚合

當地圖上須要展現的標記點 marker 過多時，可能會致使界面上 marker 出現壓蓋，展現不全，並致使總體性能變差。針對此類問題，推出點聚合能力。

使用流程以下：

  1. MapContext.initMarkerCluster 對聚合點進行初始化配置（可選）；
  2. MapContext.addMarkers 指定參與聚合的 marker；
  3. MapContext.on('markerClusterCreate', callback) 觸發時，經過 MapContext.addMarkers 更新聚合簇的樣式 （可選）；
  4. MapContext.removeMarkers 移除參與聚合的 marker；

示例代碼

在開發者工具中預覽效果

需注意的是：

  1. 地圖上的 marker 分爲普通的 marker 與參與聚合的 marker，參與聚合時需指定屬性 joinCluster 爲 true；
  2. 自定義聚合簇樣式時，一樣經過 MapContext.addMarkers 進行繪製，此時需攜帶 clusterId。

polyline

指定一系列座標點，從數組第一項連線至最後一項。繪製彩虹線時，需指定不一樣分段的顏色，如 points 包含 5 個點，則 colorList 應傳入 4 個顏色值；若 colorList 長度小於 points.length - 1，則剩下的分段顏色與最後一項保持一致。

屬性 說明 類型 必填 備註 最低版本
points 經緯度數組 array 是 [{latitude: 0, longitude: 0}]  
color 線的顏色 string 否 十六進制  
colorList 彩虹線 array 否 存在時忽略 color 值 2.13.0
width 線的寬度 number 否    
dottedLine 是否虛線 boolean 否 默認 false  
arrowLine 帶箭頭的線 boolean 否 默認 false，開發者工具暫不支持該屬性 1.2.0
arrowIconPath 更換箭頭圖標 string 否 在 arrowLine 爲 true 時生效 1.6.0
borderColor 線的邊框顏色 string 否   1.2.0
borderWidth 線的厚度 number 否   1.2.0
level 壓蓋關係 string 否 默認爲 abovelabels 2.14.0

level 字段表示與其它地圖元素的壓蓋關係，可選值以下：

值 說明 最低版本
abovelabels 顯示在全部 POI 之上 2.14.0
abovebuildings 顯示在樓塊之上 POI 之下 2.14.0
aboveroads 顯示在道路之上樓塊之下 2.14.0

polygon

指定一系列座標點，根據 points 座標數據生成閉合多邊形

屬性 說明 類型 必填 備註 最低版本
points 經緯度數組 array 是 [{latitude: 0, longitude: 0}] 2.3.0
strokeWidth 描邊的寬度 number 否   2.3.0
strokeColor 描邊的顏色 string 否 十六進制 2.3.0
fillColor 填充顏色 string 否 十六進制  
zIndex 設置多邊形Z軸數值 number 否   2.3.0
level 壓蓋關係 string 否 默認爲 abovelabels 2.14.0

circle

在地圖上顯示圓

屬性 說明 類型 必填 備註
latitude 緯度 number 是 浮點數，範圍 -90 ~ 90
longitude 經度 number 是 浮點數，範圍 -180 ~ 180
color 描邊的顏色 string 否 十六進制
fillColor 填充顏色 string 否 十六進制
radius 半徑 number 是  
strokeWidth 描邊的寬度 number 否  
level 壓蓋關係 string 否 默認爲 abovelabels

control

在地圖上顯示控件，控件不隨着地圖移動。即將廢棄，請使用 cover-view

屬性 說明 類型 必填 備註
id 控件id number 否 在控件點擊事件回調會返回此id
position 控件在地圖的位置 object 是 控件相對地圖位置
iconPath 顯示的圖標 string 是 項目目錄下的圖片路徑，支持本地路徑、代碼包路徑
clickable 是否可點擊 boolean 否 默認不可點擊

position

屬性 說明 類型 必填 備註
left 距離地圖的左邊界多遠 number 否 默認爲0
top 距離地圖的上邊界多遠 number 否 默認爲0
width 控件寬度 number 否 默認爲圖片寬度
height 控件高度 number 否 默認爲圖片高度

bindregionchange 返回值

屬性 說明 類型 備註
type 視野變化開始、結束時觸發 string 視野變化開始爲begin，結束爲end
causedBy 致使視野變化的緣由 string 拖動地圖致使(drag)、縮放致使(scale)、調用接口致使(update)

比例尺

                   
scale 3 4 5 6 7 8 9 10 11
比例 1000km 500km 200km 100km 50km 50km 20km 10km 5km
scale 12 13 14 15 16 17 18 19 20
比例 2km 1km 500m 200m 100m 50m 50m 20m 10m

示例代碼

在開發者工具中預覽效果

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程