圆

`<hcm-amap-circle>`

简介

<hcm-amap-circle>组件用于在地图上显示一个圆形，<hcm-amap-circle>组件必须以子组件的形式存在于<hcm-amap>中，<hcm-amap-circle>不支持子组件

属性

属性名	类型	默认值	必选	支持iOS	支持Android	说明
`center`	`Object`	-	Y	Y	Y	圆心位置
`radius`	`Double`	-	Y	Y	Y	圆半径，单位：米
`fillColor`	`String`	`#4087fd55`	N	Y	Y	圆内部填充颜色
`selectedFillColor`	`String`	-	N	Y	Y	被选中后圆内部填充颜色
`strokeColor`	`String`	-	N	Y	Y	轮廓线的颜色
`selectedStrokeColor`	`String`	-	N	Y	Y	被选中后轮廓线线的颜色
`lineWidth`	`Double`	0.0	N	Y	Y	轮廓线的宽度
`lineDashType`	`Int`	0	N	Y	Y	虚线类型
`selectable`	`Bool`	true	N	Y	Y	是否可被选中

`center`

圆心位置坐标，其属性必须包含以下两项：

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

`fillColor`

线条颜色，其格式目前只能为#RRGGBBAA或者#RRGGBB

`selectedFillColor`

选中后线条颜色，其格式目前只能为#RRGGBBAA或者#RRGGBB

`strokeColor`

线条颜色，其格式目前只能为#RRGGBBAA或者#RRGGBB

`selectedStrokeColor`

选中后线条颜色，其格式目前只能为#RRGGBBAA或者#RRGGBB

`lineDashType`

虚线样式，其值为一下其中值的一个:

0 -- 不画虚线，默认
1 -- 方块样式的虚线
2 -- 圆点样式的虚线

事件

事件名	支持iOS	支持Android	说明
`selected`	Y	Y	圆被选中
`deselected`	Y	Y	圆取消选中

示例

<template>
  <div class="wrapper">
    <hcm-amap class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              :showUserLocation="true">
        <hcm-amap-circle class="amap-circle"
                         v-for="(circle, idx) in circles"
                         :key="idx"
                         :center="circle.center"
                         :radius="circle.radius"
                         :fillColor="circle.fillColor"
                         :strokeColor="circle.strokeColor"
                         :selectable="circle.selectable"
                         :selectedStrokeColor="circle.selectedStrokeColor"
                         :selectedFillColor="circle.selectedFillColor"
                         :lineWidth="circle.lineWidth"
                         :lineDashType="circle.lineDashType"
                         @selected="selectedOverlay(circle, idx)"
                         @deselected="deselectedOverlay(circle, idx)">
        </hcm-amap-circle>
    </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
        }
      },
      circles: [
        {
          center: {
            latitude: 30.181046,
            longitude: 120.200826
          },
          radius: 100,
          strokeColor: '#fff0a0',
          lineWidth: 2,
          selectable: true
        },
        {
          center: {
            latitude: 30.182808,
            longitude: 120.194045
          },
          radius: 500,
          strokeColor: '#ff0000',
          selectedStrokeColor: '#0000ff',
          fillColor: '#4087fd55',
          selectedFillColor: '#ff000055',
          lineDashType: 1,
          lineWidth: 5,
          selectable: true
        }
      ]
    }
  },
  methods: {
    close () {
      amap.close()
    },
    selectedOverlay (line, idx) {
      modal.toast({
        message:
          'selecteded line' + JSON.stringify(line) + ' at index = ' + idx,
        duration: 1.0
      })
    },

    deselectedOverlay (line, idx) {
      modal.toast({
        message:
          'delecteded line' + JSON.stringify(line) + ' at index = ' + idx,
        duration: 1.0
      })
    }
  }
}
</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>

hcm-amap-circle

圆