地图
<hcm-amap>
简介
<hcm-amap>组件用于在页面上显示高德地图
属性
| 属性名 | 类型 | 默认值 | 必选 | 支持iOS | 支持Android | 说明 |
|---|---|---|---|---|---|---|
| zoomLevel | Int | 15 | N | Y | Y | 地图缩放级别（范围3-19） |
| showTraffic | Boolean | true | N | Y | Y | 是否显示交通 |
| showCompass | Boolean | false | N | Y | Y | 是否显示指南针 |
| showUserLocation | Boolean | true | N | Y | Y | 是否显示用户位置(在没有设置地图中心center和不显示用户位置的情况下，会强制显示用户位置) |
| zoomEnabled | Boolean | true | N | Y | Y | 是否允许缩放 |
| scrollEnabled | Boolean | true | N | Y | Y | 是否支持平移 |
| showScale | Boolean | true | N | Y | Y | 是否显示比例尺 |
| showPositioning | Boolean | true | N | Y | Y | 是否显示定位按钮 |
| center | Object | N | Y | Y | 地图中心地理位置坐标 {latitude：xxx, longitude:xxx}若设置了该属性，则地图中心在该位置;若没有设置，则以用户当前位置为地图中心 |
center
地图的中心点对象，其属性必须包含以下两项：
latitude(浮点型 / 必选) -- 高德坐标系下坐标点的纬度longitude(浮点型 / 必选) -- 高德坐标系下坐标点的经度
事件
| 事件名 | 支持iOS | 支持Android | 说明 |
|---|---|---|---|
| initCompleted | Y | 地图初始化完成触发 | |
| loadingFinished | Y | 地图加载完成触发 | |
| loadingFailed | Y | 地图加载失败触发 | |
| locateUserFailed | Y | 定位失败后触发 |
示例
<template>
<div class="wrapper">
<hcm-amap class="map"
:zoomLevel="map.zoomLevel"
:showScale="map.showScale"
:center="map.center"
:showPositioning="map.showPositioning"
:showUserLocation="true"
@initCompleted="initCompleted"
@loadingFinished="loadingFinished">
</hcm-amap>
<text class="close" @click="close">关闭</text>
</div>
</template>
<script>
const modal = weex.requireModule('modal')
const amap = weex.requireModule('amap')
export default {
data () {
return {
map: {
'zoomLevel': 16,
'showScale': false,
'showPositioning': true,
'showUserLocation': false,
'center': {
'latitude': 30.238753,
'longitude': 120.145336
}
}
}
},
methods: {
initCompleted () {
modal.toast({
message: 'mapInitCompleted'
})
},
loadingFinished () {
modal.toast({
message: 'loadingFinished'
})
},
close () {
amap.close()
}
}
}
</script>
<style>
.wrapper{
flex: 1;
}
.map{
flex: 1;
}
.close{
position: absolute;
top: 40px;
right: 30px;
width: 88px;
height: 88px;
background-color: white;
text-align: center;
line-height: 88px;
font-size: 30px;
border-radius: 44px;
}
</style>
TIP 使用之前请记得初始化地图，否则可能导致定位不准确 请勿在
hcm-map中使用hcm-amap-picker组件