地图选点

`<hcm-amap-picker>`

简介

<hcm-amap-picker>组件用于在页面上显示高德地图选点界面

TIP 在使用组件前，注意请先初始化地图，否则会导致地位不准确或者无法获取到用户位置

属性

属性名	类型	默认值	必选	支持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	地图中心地理位置坐标，若设置了该属性，则地图中心在该位置;若没有设置，则以用户当前位置为地图中心

`center`

地图的中心点对象，其属性必须包含以下两项：

latitude (浮点型 / 必选) -- 高德坐标系下坐标点的纬度
longitude (浮点型 / 必选) -- 高德坐标系下坐标点的经度

事件

事件名	支持iOS	支持Android	说明
`initCompleted`	Y		地图初始化完成触发
`loadingFinished`	Y		地图加载完成触发
`loadingFailed`	Y		地图加载失败触发
`locateUserFailed`	Y		定位失败后触发
`updateCenterLocation`	Y		地图中心点（选点）位置更新后触发

`updateCenterLocation`

返回的数据包含以下两项：

latitude (浮点型 / 必选) -- 高德坐标系下坐标点的纬度
longitude (浮点型 / 必选) -- 高德坐标系下坐标点的经度

示例

<template>
  <div class="wrapper">
    <hcm-amap-picker class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              @updateCenterLocation="updateLocation"
              :showUserLocation="true">
    </hcm-amap-picker>
    <text class="close" @click="close">关闭</text>
  </div>
</template>

<script>
const modal = weex.requireModule('modal')
const amap = weex.requireModule('amap')
// const stream = weex.requireModule('stream')

export default {
  data () {
    return {
      map: {
        zoomLevel: 16,
        showScale: false,
        showPositioning: true,
        showUserLocation: false,
        center: {
          latitude: 30.238753,
          longitude: 120.145336
        }
      }
    }
  },
  methods: {
    close () {
      amap.close()
    },
    updateLocation (e) {
      modal.alert({
        message: '(' + e.latitude + ',' + e.longitude + ')'
      })
    }
  }
}
</script>
<style scoped>
.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>

results matching ""

No results matching ""