map · 我的開發之路系列 - 微信開發指南

#### map 地圖。 | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | ---------------- | ----------- | ---- | -------------------- | ---------------------------------------- | | longitude | Number | | 中心經度 | | | latitude | Number | | 中心緯度 | | | scale | Number | 16 | 縮放級別，取值范圍為5-18 | | | markers | Array | | 標記點 | | | covers | Array | | **即將移除，請使用 markers** | | | polyline | Array | | 路線 | | | circles | Array | | 圓 | | | controls | Array | | 控件 | | | include-points | Array | | 縮放視野以包含所有給定的坐標點 | | | show-location | Boolean | | 顯示帶有方向的當前定位點 | | | bindmarkertap | EventHandle | | 點擊標記點時觸發 | | | bindcallouttap | EventHandle | | 點擊標記點對應的氣泡時觸發 | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | bindcontroltap | EventHandle | | 點擊控件時觸發 | | | bindregionchange | EventHandle | | 視野發生變化時觸發 | | | bindtap | EventHandle | | 點擊地圖時觸發 | | | bindupdated | EventHandle | | 在地圖渲染更新完成時觸發 | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | **注意: covers 屬性即將移除，請使用 markers 替代** ##### markers 標記點用于在地圖上顯示標記的位置 | 屬性 | 說明 | 類型 | 必填 | 備注 | 最低版本 | | --------- | ------------------ | ------ | ---- | ---------------------------------------- | ---------------------------------------- | | id | 標記點id | Number | 否 | marker點擊事件回調會返回此id。**建議為每個marker設置上Number類型id，保證更新marker時有更好的性能。** | | | latitude | 緯度 | Number | 是 | 浮點數，范圍 -90 ~ 90 | | | longitude | 經度 | Number | 是 | 浮點數，范圍 -180 ~ 180 | | | title | 標注點名 | String | 否 | | | | iconPath | 顯示的圖標 | String | 是 | 項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑 | | | rotate | 旋轉角度 | Number | 否 | 順時針旋轉的角度，范圍 0 ~ 360，默認為 0 | | | alpha | 標注的透明度 | Number | 否 | 默認1，無透明 | | | width | 標注圖標寬度 | Number | 否 | 默認為圖片實際寬度 | | | height | 標注圖標高度 | Number | 否 | 默認為圖片實際高度 | | | callout | 自定義標記點上方的氣泡窗口 | Object | 否 | 支持的屬性見下表，可識別換行符。 | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | label | 為標記點旁邊增加標簽 | Object | 否 | 支持的屬性見下表，可識別換行符。 | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | anchor | 經緯度在標注圖標的錨點，默認底邊中點 | Object | 否 | {x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點 | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | ##### marker 上的氣泡 callout | 屬性 | 說明 | 類型 | 最低版本 | | ------------ | ------------------------------- | ------ | ---------------------------------------- | | content | 文本 | String | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | color | 文本顏色 | String | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | fontSize | 文字大小 | Number | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | borderRadius | callout邊框圓角 | Number | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | bgColor | 背景色 | String | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | padding | 文本邊緣留白 | Number | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | display | 'BYCLICK':點擊顯示; 'ALWAYS':常顯 | String | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | textAlign | 文本對齊方式。有效值: left, right, center | String | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | ##### marker 上的氣泡 label | 屬性 | 說明 | 類型 | 最低版本 | | ------------ | ------------------------------- | ------ | ---------------------------------------- | | content | 文本 | String | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | color | 文本顏色 | String | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | fontSize | 文字大小 | Number | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | x | label的坐標，原點是 marker 對應的經緯度 | Number | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | y | label的坐標，原點是 marker 對應的經緯度 | Number | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | borderWidth | 邊框寬度 | Number | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | borderColor | 邊框顏色 | String | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | borderRadius | 邊框圓角 | Number | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | bgColor | 背景色 | String | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | padding | 文本邊緣留白 | Number | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | textAlign | 文本對齊方式。有效值: left, right, center | String | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | ##### polyline 指定一系列坐標點，從數組第一項連線至最后一項 | 屬性 | 說明 | 類型 | 必填 | 備注 | 最低版本 | | ------------- | ------ | ------- | ---- | -------------------------------- | ---------------------------------------- | | points | 經緯度數組 | Array | 是 | [{latitude: 0, longitude: 0}] | | | color | 線的顏色 | String | 否 | 8位十六進制表示，后兩位表示alpha值，如：#000000AA | | | width | 線的寬度 | Number | 否 | | | | dottedLine | 是否虛線 | Boolean | 否 | 默認false | | | arrowLine | 帶箭頭的線 | Boolean | 否 | 默認false，開發者工具暫不支持該屬性 | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | arrowIconPath | 更換箭頭圖標 | String | 否 | 在arrowLine為true時生效 | [1.6.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | borderColor | 線的邊框顏色 | String | 否 | | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | borderWidth | 線的厚度 | Number | 否 | | [1.2.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | ##### circles 在地圖上顯示圓 | 屬性 | 說明 | 類型 | 必填 | 備注 | | ----------- | ----- | ------ | ---- | -------------------------------- | | latitude | 緯度 | Number | 是 | 浮點數，范圍 -90 ~ 90 | | longitude | 經度 | Number | 是 | 浮點數，范圍 -180 ~ 180 | | color | 描邊的顏色 | String | 否 | 8位十六進制表示，后兩位表示alpha值，如：#000000AA | | fillColor | 填充顏色 | String | 否 | 8位十六進制表示，后兩位表示alpha值，如：#000000AA | | radius | 半徑 | Number | 是 | | | strokeWidth | 描邊的寬度 | Number | 否 | | ##### controls 在地圖上顯示控件，控件不隨著地圖移動 | 屬性 | 說明 | 類型 | 必填 | 備注 | | --------- | -------- | ------- | ---- | ---------------------------------------- | | id | 控件id | Number | 否 | 在控件點擊事件回調會返回此id | | position | 控件在地圖的位置 | Object | 是 | 控件相對地圖位置 | | iconPath | 顯示的圖標 | String | 是 | 項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑 | | clickable | 是否可點擊 | Boolean | 否 | 默認不可點擊 | ###### position | 屬性 | 說明 | 類型 | 必填 | 備注 | | ------ | ---------- | ------ | ---- | ------- | | left | 距離地圖的左邊界多遠 | Number | 否 | 默認為0 | | top | 距離地圖的上邊界多遠 | Number | 否 | 默認為0 | | width | 控件寬度 | Number | 否 | 默認為圖片寬度 | | height | 控件高度 | Number | 否 | 默認為圖片高度 | 地圖組件的經緯度必填, 如果不填經緯度則默認值是北京的經緯度。 **示例：** ```  <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) } }) ``` 相關api：[wx.createMapContext](https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-map.html) ##### 注意事項 1. `tip`: `map` 組件是由客戶端創建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。 2. `tip`: 請勿在 `scroll-view`、`swiper`、`picker-view`、`movable-view` 中使用 `map` 組件。 3. `tip`: `css` 動畫對 `map` 組件無效。 4. `tip`: `map` 組件使用的經緯度是火星坐標系，調用 `wx.getLocation` 接口需要指定 `type` 為 `gcj02`