示例
<map class="map" :latitude="mapOptions.latitude" :longitude="mapOptions.longitude" :scale="mapOptions.scale"
:markers="mapOptions.markers"></map>
mapOptions: {
longitude: '108.95', // 中心經(jīng)度
latitude: '34.22', // 中心緯度
scale: 15, // 縮放等級
markers: [ // 標(biāo)記點
{
id: 1,
longitude: '108.95', // 中心經(jīng)度
latitude: '34.22', // 中心緯度
iconPath: '../../static/logo.png',
width: 30,
height: 30
}
]
}
屬性說明
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 平臺差異說明 |
|---|---|---|---|---|
| longitude | Number | 中心經(jīng)度 | ||
| latitude | Number | 中心緯度 | ||
| scale | Number | 16 | 縮放級別，取值范圍為3-20 | 高德地圖縮放比例與微信小程序不同 |
| theme | String | normal | 主題（satellite 或 normal）只在初始化時有效，不能動態(tài)變更（僅Android支持） | 京東小程序 |
| min-scale | Number | 3 | 最小縮放級別 | App-nvue 3.1.0+、微信小程序2.13+ |
| max-scale | Number | 20 | 最大縮放級別 | App-nvue 3.1.0+、微信小程序2.13+ |
| layer-style | Number/String | 1 | 個性化地圖 | App-nvue 3.1.0+、微信小程序2.13+ |
| markers | Array | 標(biāo)記點 | ||
| polyline | Array | 路線 | 飛書小程序不支持 | |
| circles | Array | 圓 | ||
| controls | Array | 控件 | ||
| include-points | Array | 縮放視野以包含所有給定的坐標(biāo)點 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付寶小程序、京東小程序 | |
| enable-3D | Boolean | false | 是否顯示3D樓塊 | App-nvue 2.1.5+、微信小程序2.3.0 |
| show-compass | Boolean | false | 是否顯示指南針 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-zoom | Boolean | true | 是否支持縮放 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-scroll | Boolean | true | 是否支持拖動 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-rotate | Boolean | false | 是否支持旋轉(zhuǎn) | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-overlooking | Boolean | false | 是否開啟俯視 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-satellite | Boolean | false | 是否開啟衛(wèi)星圖 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-traffic | Boolean | false | 是否開啟實時路況 | App-nvue 2.1.5+、微信小程序2.7.0 |
| enable-poi | Boolean | false | 是否展示 POI 點 | App-nvue 3.1.0+ |
| enable-building | Boolean | false | 是否展示建筑物 | App-nvue 3.1.0+ 支持 (廢除原enable-3D屬性 高德地圖默認(rèn)開啟建筑物就是3D無法設(shè)置) |
| show-location | Boolean | 顯示帶有方向的當(dāng)前定位點 | 微信小程序、H5、百度小程序、支付寶小程序、京東小程序 | |
| polygons（支付寶為: polygon） | Array.<polygon>
|
多邊形 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付寶小程序 | |
| enable-indoorMap | Boolean | false | 是否展示室內(nèi)地圖 | App-nvue 3.1.0+ |
| @markertap | EventHandle | 點擊標(biāo)記點時觸發(fā)，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付寶小程序 （App和H5平臺需要指定 marker 對象屬性 id） | |
| @labeltap | EventHandle | 點擊label時觸發(fā)，e.detail = {markerId} | 微信小程序2.9.0 | |
| @callouttap | EventHandle | 點擊標(biāo)記點對應(yīng)的氣泡時觸發(fā)，e.detail = {markerId} | ||
| @controltap | EventHandle | 點擊控件時觸發(fā)，e.detail = {controlId} | ||
| @regionchange | EventHandle | 視野發(fā)生變化時觸發(fā) | 微信小程序、H5、百度小程序、支付寶小程序、京東小程序 | |
| @tap | EventHandle | 點擊地圖時觸發(fā); App-nvue、微信小程序2.9支持返回經(jīng)緯度 | ||
| @updated | EventHandle | 在地圖渲染更新完成時觸發(fā) | 微信小程序、H5、百度小程序 | |
| @anchorpointtap | EventHandle | 點擊定位標(biāo)時觸發(fā)，e.detail = {longitude, latitude} | App-nvue 3.1.0+、微信小程序2.13+ | |
| @poitap | EventHandle | 點擊地圖poi點時觸發(fā)，e.detail = {name, longitude, latitude} | 微信小程序2.3.0+ |
文章來源地址http://www.zghlxwxcb.cn/news/detail-824059.html
文章來源：http://www.zghlxwxcb.cn/news/detail-824059.html
到了這里，關(guān)于#Uniapp：map地圖組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
