微信小程序MAP地圖插件
日期：2018-09-12 作者：管理員 來源：本站
微信小程序MAP地圖插件是原生組件中的個(gè)性化地圖【小程序插件定制開發(fā)電話】為豐富小程序地圖服務(wù)的使用場景，小程序地圖組件新增個(gè)性化底圖樣式，小程序開發(fā)者可通過開通騰訊位置服務(wù)更換小程序地圖樣式，使用時(shí)請(qǐng)注意微信小程序MAP地圖插件相關(guān)限制，個(gè)性化地圖能力可在小程序后臺(tái)“設(shè)置-開發(fā)者工具-騰訊地圖服務(wù)”申請(qǐng)開通，設(shè)置subkey后，小程序內(nèi)的地圖組件均會(huì)使用該底圖效果，底圖場景的切換會(huì)在后續(xù)版本提供。
微信小程序MAP地圖插件
微信小程序MAP地圖插件
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
|---|---|---|---|---|
| longitude | Number | 中心經(jīng)度 | ||
| latitude | Number | 中心緯度 | ||
| scale | Number | 16 | 縮放級(jí)別，取值范圍為5-18 | |
| markers | Array | 標(biāo)記點(diǎn) | ||
| covers | Array | 即將移除，請(qǐng)使用 markers | ||
| polyline | Array | 路線 | ||
| polygons | Array | 多邊形 | 2.3.0 | |
| circles | Array | 圓 | ||
| controls | Array | 控件（即將廢棄，建議使用 cover-view 代替） | ||
| include-points | Array | 縮放視野以包含所有給定的坐標(biāo)點(diǎn) | ||
| show-location | Boolean | 顯示帶有方向的當(dāng)前定位點(diǎn) | ||
| subkey | String | '' | 個(gè)性化地圖使用的key，僅初始化地圖時(shí)有效 | 2.3.0 |
| enable-3D | Boolean | false | 展示3D樓塊(工具暫不支持） | 2.3.0 |
| show-compass | Boolean | false | 顯示指南針 | 2.3.0 |
| enable-overlooking | Boolean | false | 開啟俯視 | 2.3.0 |
| enable-zoom | Boolean | true | 是否支持縮放 | 2.3.0 |
| enable-scroll | Boolean | true | 是否支持拖動(dòng) | 2.3.0 |
| enable-rotate | Boolean | false | 是否支持旋轉(zhuǎn) | 2.3.0 |
| bindmarkertap | EventHandle | 點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā)，會(huì)返回marker的id | ||
| bindcallouttap | EventHandle | 點(diǎn)擊標(biāo)記點(diǎn)對(duì)應(yīng)的氣泡時(shí)觸發(fā)，會(huì)返回marker的id | 1.2.0 | |
| bindcontroltap | EventHandle | 點(diǎn)擊控件時(shí)觸發(fā)，會(huì)返回control的id | ||
| bindregionchange | EventHandle | 視野發(fā)生變化時(shí)觸發(fā) | 2.3.0起增加causedBy 參數(shù)區(qū)分拖動(dòng)、縮放和調(diào)用接口等來源 | |
| bindtap | EventHandle | 點(diǎn)擊地圖時(shí)觸發(fā) | ||
| bindupdated | EventHandle | 在地圖渲染更新完成時(shí)觸發(fā) | 1.6.0 | |
| bindpoitap | EventHandle | 點(diǎn)擊地圖poi點(diǎn)時(shí)觸發(fā) | 2.3.0 |
注意: covers 屬性即將移除，請(qǐng)使用 markers 替代
markers
標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置
| 屬性 | 說明 | 類型 | 必填 | 備注 | 最低版本 |
|---|---|---|---|---|---|
| id | 標(biāo)記點(diǎn)id | Number | 否 | marker點(diǎn)擊事件回調(diào)會(huì)返回此id。建議為每個(gè)marker設(shè)置上Number類型id，保證更新marker時(shí)有更好的性能。 | |
| latitude | 緯度 | Number | 是 | 浮點(diǎn)數(shù)，范圍 -90 ~ 90 | |
| longitude | 經(jīng)度 | Number | 是 | 浮點(diǎn)數(shù)，范圍 -180 ~ 180 | |
| title | 標(biāo)注點(diǎn)名 | String | 否 | ||
| zIndex | 顯示層級(jí) | Number | 否 | 2.3.0 | |
| iconPath | 顯示的圖標(biāo) | String | 是 | 項(xiàng)目目錄下的圖片路徑，支持相對(duì)路徑寫法，以'/'開頭則表示相對(duì)小程序根目錄；也支持臨時(shí)路徑和網(wǎng)絡(luò)圖片（2.3.0） | |
| rotate | 旋轉(zhuǎn)角度 | Number | 否 | 順時(shí)針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認(rèn)為 0 | |
| alpha | 標(biāo)注的透明度 | Number | 否 | 默認(rèn)1，無透明，范圍 0 ~ 1 | |
| width | 標(biāo)注圖標(biāo)寬度 | Number | 否 | 默認(rèn)為圖片實(shí)際寬度 | |
| height | 標(biāo)注圖標(biāo)高度 | Number | 否 | 默認(rèn)為圖片實(shí)際高度 | |
| callout | 自定義標(biāo)記點(diǎn)上方的氣泡窗口 | Object | 否 | 支持的屬性見下表，可識(shí)別換行符。 | 1.2.0 |
| label | 為標(biāo)記點(diǎn)旁邊增加標(biāo)簽 | Object | 否 | 支持的屬性見下表，可識(shí)別換行符。 | 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
| 屬性 | 說明 | 類型 | 最低版本 |
|---|---|---|---|
| content | 文本 | String | 1.2.0 |
| color | 文本顏色 | String | 1.2.0 |
| fontSize | 文字大小 | Number | 1.2.0 |
| borderRadius | 邊框圓角 | Number | 1.2.0 |
| borderWidth | 邊框?qū)挾?/td> | Number | 2.3.0 |
| borderColor | 邊框顏色 | String | 2.3.0 |
| bgColor | 背景色，2.3.0開始支持RGBA透明度 | String | 1.2.0 |
| padding | 文本邊緣留白 | Number | 1.2.0 |
| display | 'BYCLICK':點(diǎn)擊顯示; 'ALWAYS':常顯 | String | 1.2.0 |
| textAlign | 文本對(duì)齊方式。有效值: left, right, center | String | 1.6.0 |
marker 上的氣泡 label
| 屬性 | 說明 | 類型 | 最低版本 |
|---|---|---|---|
| content | 文本 | String | 1.2.0 |
| color | 文本顏色 | String | 1.2.0 |
| fontSize | 文字大小 | Number | 1.2.0 |
| x | label的坐標(biāo)（廢棄） | Number | 1.2.0 |
| y | label的坐標(biāo)（廢棄） | Number | 1.2.0 |
| anchorX | label的坐標(biāo)，原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度 | Number | 2.1.0 |
| anchorY | label的坐標(biāo)，原點(diǎn)是 marker 對(duì)應(yīng)的經(jīng)緯度 | Number | 2.1.0 |
| borderWidth | 邊框?qū)挾?/td> | 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 | 文本對(duì)齊方式。有效值: left, right, center | String | 1.6.0 |
polyline
指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)
| 屬性 | 說明 | 類型 | 必填 | 備注 | 最低版本 |
|---|---|---|---|---|---|
| points | 經(jīng)緯度數(shù)組 | Array | 是 | [{latitude: 0, longitude: 0}] | |
| color | 線的顏色 | String | 否 | 8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA | |
| width | 線的寬度 | Number | 否 | ||
| dottedLine | 是否虛線 | Boolean | 否 | 默認(rèn)false | |
| arrowLine | 帶箭頭的線 | Boolean | 否 | 默認(rèn)false，開發(fā)者工具暫不支持該屬性 | 1.2.0 |
| arrowIconPath | 更換箭頭圖標(biāo) | String | 否 | 在arrowLine為true時(shí)生效 | 1.6.0 |
| borderColor | 線的邊框顏色 | String | 否 | 1.2.0 | |
| borderWidth | 線的厚度 | Number | 否 | 1.2.0 |
polygons
指定一系列坐標(biāo)點(diǎn)，根據(jù) points 坐標(biāo)數(shù)據(jù)生成閉合多邊形，最低版本2.3.0
| 屬性 | 說明 | 類型 | 必填 | 備注 | 最低版本 |
|---|---|---|---|---|---|
| points | 經(jīng)緯度數(shù)組 | Array | 是 | [{latitude: 0, longitude: 0}] | |
| strokeWidth | 描邊的寬度 | Number | 否 | ||
| strokeColor | 描邊的顏色 | String | 否 | 8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA | |
| fillColor | 填充顏色 | String | 否 | 8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA | |
| zIndex | 設(shè)置多邊形Z軸數(shù)值 | Number | 否 |
circles
在地圖上顯示圓
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| latitude | 緯度 | Number | 是 | 浮點(diǎn)數(shù)，范圍 -90 ~ 90 |
| longitude | 經(jīng)度 | Number | 是 | 浮點(diǎn)數(shù)，范圍 -180 ~ 180 |
| color | 描邊的顏色 | String | 否 | 8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA |
| fillColor | 填充顏色 | String | 否 | 8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA |
| radius | 半徑 | Number | 是 | |
| strokeWidth | 描邊的寬度 | Number | 否 |
controls
在地圖上顯示控件，控件不隨著地圖移動(dòng)。即將廢棄，請(qǐng)使用 cover-view
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| id | 控件id | Number | 否 | 在控件點(diǎn)擊事件回調(diào)會(huì)返回此id |
| position | 控件在地圖的位置 | Object | 是 | 控件相對(duì)地圖位置 |
| iconPath | 顯示的圖標(biāo) | String | 是 | 項(xiàng)目目錄下的圖片路徑，支持相對(duì)路徑寫法，以'/'開頭則表示相對(duì)小程序根目錄；也支持臨時(shí)路徑 |
| clickable | 是否可點(diǎn)擊 | Boolean | 否 | 默認(rèn)不可點(diǎn)擊 |
position
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| 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)緯度。
示例：
在開發(fā)者工具中預(yù)覽效果
<!-- 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)
}
})相關(guān)api：wx.createMapContext
Bug & Tip
請(qǐng)注意原生組件使用限制。
tip: map 組件使用的經(jīng)緯度是火星坐標(biāo)系，調(diào)用 wx.getLocation 接口需要指定 type 為 gcj02
掃二維碼手機(jī)查看該文章
當(dāng)前網(wǎng)址：http://xjsccl.cn/wechat/613.html
在線咨詢
電話咨詢
