多边形

<hcm-amap-polygon>

简介

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

属性

points

构成多边形轮廓线的节点坐标数组，数组里是坐标点对象，坐标点对象，其属性必须包含以下两项：

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

fillColor

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

selectedFillColor

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

strokeColor

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

selectedStrokeColor

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

lineDashType

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

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

事件

示例

<template>
  <div class="wrapper">
    <hcm-amap class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              :showUserLocation="true">
      <hcm-amap-polygon class="map-polygon"
                          v-for="(polygon, idx) in polygons"
                          :key=idx
                          :points="polygon.points"
                          :strokeColor="polygon.strokeColor"
                          :fillColor="polygon.fillColor"
                          :lineWidth="polygon.lineWidth"
                          :lineDashType="polygon.lineDashType"
                          :selectedStrokeColor="polygon.selectedStrokeColor"
                          :selectedFillColor="polygon.selectedFillColor"
                          :selectable="polygon.selectable"
                          @selected="selectedOverlay(polygon, idx)"
                          @deselected="deselectedOverlay(polygon, idx)">
       </hcm-amap-polygon>
    </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
        }
      },
      polygons: [
        {
          points: [
            {
              latitude: 30.185757,
              longitude: 120.20001
            },
            {
              latitude: 30.1824,
              longitude: 120.20192
            },
            {
              latitude: 30.187909,
              longitude: 120.208143
            }
          ],
          strokeColor: '4087fd',
          lineWidth: 4,
          fillColor: '#4087fd55',
          selectedStrokeColor: '#ff0000',
          selectable: true,
          lineDashType: 1
        },
        {
          points: [
            {
              latitude: 30.181306,
              longitude: 120.202607
            },
            {
              latitude: 30.178152,
              longitude: 120.197779
            },
            {
              latitude: 30.177466,
              longitude: 120.202221
            },
            {
              latitude: 30.178152,
              longitude: 120.211791
            },
            {
              latitude: 30.18266,
              longitude: 120.210031
            }
          ],
          strokeColor: '#4087fd',
          lineWidth: 4,
          selectedFillColor: '#ff0000',
          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>