## 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 顯示帶有方向的當前定位點 @markertap EventHandle 點擊標記點時觸發 @callouttap EventHandle 點擊標記點對應的氣泡時觸發 微信小程序、5+App @controltap EventHandle 點擊控件時觸發 @regionchange EventHandle 視野發生變化時觸發 @tap EventHandle 點擊地圖時觸發 @updated EventHandle 在地圖渲染更新完成時觸發 微信小程序 ``` 注意: covers 屬性即將移除，請使用 markers 替代 uniapp只支持gcj02坐標 **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，無透明，范圍 0 ~ 1 width 標注圖標寬度 Number 否 默認為圖片實際寬度 height 標注圖標高度 Number 否 默認為圖片實際高度 callout 自定義標記點上方的氣泡窗口 Object 否 支持的屬性見下表，可識別換行符。 微信小程序、5+App label 為標記點旁邊增加標簽 Object 否 支持的屬性見下表，可識別換行符。 微信小程序、5+App anchor 經緯度在標注圖標的錨點，默認底邊中點 Object 否 {x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點 微信小程序、5+App ``` **marker 上的氣泡 callout** ``` 屬性 說明 類型 平臺支持 content 文本 String 微信小程序、5+App color 文本顏色 String 微信小程序、5+App fontSize 文字大小 Number 微信小程序、5+App borderRadius callout邊框圓角 Number 微信小程序、5+App bgColor 背景色 String 微信小程序、5+App padding 文本邊緣留白 Number 微信小程序、5+App display 'BYCLICK':點擊顯示; 'ALWAYS':常顯 String 微信小程序、5+App textAlign 文本對齊方式。有效值: left, right, center String 微信小程序、5+App ``` **marker 上的氣泡 label** ``` 屬性 說明 類型 平臺支持 content 文本 String 微信小程序、5+App color 文本顏色 String 微信小程序、5+App fontSize 文字大小 Number 微信小程序、5+App x label的坐標，原點是 marker 對應的經緯度 Number 微信小程序、5+App y label的坐標，原點是 marker 對應的經緯度 Number 微信小程序、5+App borderWidth 邊框寬度 Number 微信小程序、5+App borderColor 邊框顏色 String 微信小程序、5+App borderRadius 邊框圓角 Number 微信小程序、5+App bgColor 背景色 String 微信小程序、5+App padding 文本邊緣留白 Number 微信小程序、5+App textAlign 文本對齊方式。有效值: left, right, center String 微信小程序、5+App ``` **polyline** 指定一系列坐標點，從數組第一項連線至最后一項 ``` 屬性 說明 類型 必填 備注 平臺支持 points 經緯度數組 Array 是 [{latitude: 0, longitude: 0}] color 線的顏色 String 否 8位十六進制表示，后兩位表示alpha值，如：#000000AA width 線的寬度 Number 否 dottedLine 是否虛線 Boolean 否 默認false arrowLine 帶箭頭的線 Boolean 否 默認false，開發者工具暫不支持該屬性 微信小程序、5+App arrowIconPath 更換箭頭圖標 String 否 在arrowLine為true時生效 微信小程序、5+App borderColor 線的邊框顏色 String 否 微信小程序、5+App borderWidth 線的厚度 Number 否 微信小程序、5+App ``` **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 否 默認為圖片高度 ``` 地圖組件的經緯度必填, 如果不填經緯度則默認值是北京的經緯度。 **示例：** ``` <template> <view> <view class="page-body"> <view class="page-section page-section-gap"> <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"> </map> </view> </view> </view> </template> export default { data() { return { title: 'map', latitude: 39.909, longitude: 116.39742, markers: [{ width : 40, height: 40, latitude: 39.909, longitude: 116.39742, iconPath: '../../../static/p.png' }] } }, methods: { } } </script>```