map · 小程序

地圖。該組件是原生組件， **只是寫了部分map小程序api，詳情點擊 : [微信小程序map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)** | 屬性名 | 類型 | 默認值 | 說明 | |---|---|---|---| | longitude| Number | | 中心經度（必填） | | latitude| Number | | 中心維度（必填）| | scale | Number | 16 | 縮放級別，取值范圍為5-18 | | markers| Array | | 標記點 | | circles | Array | | 圓 | | controls | Array | | | | bindmarkertap | EventHandle | | 點擊標記點時觸發，會返回marker的id | | ... | ... | ... | ... | **markers** > 標記點用于在地圖上顯示標記的位置 | 屬性 | 說明 | 類型 | 必填 | |---|---|---|---| | id | 標記點id（marker點擊事件回調會返回此id） | Number |否| | latitude | 緯度（范圍 -90 ~ 90） | Number | 是 | | longitude | 經度（范圍 -180 ~ 180） | Number | 是 | | title | 標注點名 | String | 否 | | iconPath | 顯示的圖標 | String | 是 | | callout | 自定義標記點上方的氣泡窗口 | Object | 否| | label | 為標記點旁邊增加標簽 | Object | 否 | | ... | ...| ...| ...| **marker 上的氣泡 callout** | 屬性 | 說明 | 類型 | |---|---|---| | content | 文本 | String | | color | 文本顏色| String| | fontsize| 文字大小| Number| | borderRadius| 邊框圓角| Number | |... | ...| ...| **marker 上的氣泡 label** | 屬性 | 說明 | 類型 | |---|---|---| | content | 文本 | String | | color | 文本顏色| String| | fontsize| 文字大小| Number| |... | ...| ...| **circles** > 在地圖上顯示圓 | 屬性 | 說明 | 類型 | 必填 | |---|---|---|---| | latitude | 緯度（范圍 -90 ~ 90） | Number | 是 | | longitude | 經度（范圍 -180 ~ 180） | Number | 是 | | color | 描邊的顏色 | String | 否 | | fillColor | 填充顏色 | String | 否 | | radius | 半徑 | Number | 是 | | strokeWidth | 描邊的寬度 | Number | 否 | **controls** > 在地圖上顯示控件，控件不隨著地圖移動 | 屬性 | 說明 | 類型 | 必填 | |---|---|---|---| | id| 控件id（在控件點擊事件回調會返回此id） | Number |否 | | position | 控件在地圖的位置 | Object | 是 | | iconPath| 顯示的圖標（項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑） | String | 是 | | clickable | 是否可點擊 | Boolean | 否| **controlsl上的position** | 屬性 | 說明 | 類型 | 必填 | |---|---|---|---| | left| 距離地圖的左邊界多遠| Number | 否 | | top | 距離地圖的上邊界多遠 | | 否| | width | 控件寬度 | Number| 否| | height|控件高度 | Number | 否| **地圖組件的經緯度必填, 如果不填經緯度則默認值是北京的經緯度。** **地圖實例：** 創建頁面"pages/map/map" ~~~  <map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25" circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker"></map> ~~~ ~~~ // pages/map/map.js Page({ /** * 頁面的初始數據 */ data: { latitude: 30.689160, longitude: 114.372640, circles: [{ latitude: 30.689160, longitude: 114.372640, fillColor: "#8DE25055", radius: 300 }], markers: [{ iconPath: "/images/icon/map.png", latitude: 30.689160, longitude: 114.372640, width: 30, height: 30, title: "黑科技", id: 0, label: { content: "湖北大學知行學院", color: "#EE5E7B", borderWidth: 1, borderColor: "#EE5E78", borderRadius: 5, padding: 5, }, callout: { content: "歡迎來到湖北大學知行學院", color: "#EE5E7B", borderWidth: 1, borderColor: "#EE5E78", borderRadius: 5, padding: 5, } }], }, marker() { } }) ~~~