折线

<hcm-amap-polyline>

简介

<hcm-amap-polyline>组件用于在地图上显示折线段，<hcm-amap-polyline>组件必须以子组件的形式存在于<hcm-amap>中，<hcm-amap-polyline>不支持子组件

属性

points

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

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

strokeColor

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

selectedStrokeColor

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

lineDashType

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

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

lineCapType

线头类型，其值为一下其中值的一个:

• 0 -- 普通头，默认
• 1 -- 扩展头
• 2 -- 箭头
• 3 -- 圆形头

事件

示例

<template>
  <div class="wrapper">
    <hcm-amap class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              :showUserLocation="true">
      <hcm-amap-polyline class="map-polyline"
                          v-for="(line, idx) in lines"
                          :key="idx"
                          :points="line.points"
                          :strokeColor="line.strokeColor"
                          :lineWidth="line.lineWidth"
                          :lineDashType="line.lineDashType"
                          :lineCapType="line.lineCapType"
                          :selectedStrokeColor="line.selectedStrokeColor"
                          :selectable="line.selectable"
                          @selected="selectedOverlay(line, idx)"
                          @deselected="deselectedOverlay(line, idx)">
      </hcm-amap-polyline>
    </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
        }
      },
      lines: [
        {
          points: [
            {
              latitude: 30.185312,
              longitude: 120.198122
            },
            {
              latitude: 30.187612,
              longitude: 120.19044
            }
          ],
          selectable: true,
          strokeColor: '#00ffff',
          lineWidth: 5,
          lineCapType: 2,
          lineDashType: 1
        },
        {
          points: [
            {
              latitude: 30.179747,
              longitude: 120.194861
            },
            {
              latitude: 30.181046,
              longitude: 120.200826
            },
            {
              latitude: 30.189652,
              longitude: 120.190354
            }
          ],
          strokeColor: '#00ff00',
          lineWidth: 10,
          lineCapType: 3,
          selectable: true
        },

        {
          points: [
            {
              latitude: 30.189652,
              longitude: 120.190354
            },
            {
              latitude: 30.187612,
              longitude: 120.19044
            },
            {
              latitude: 30.179747,
              longitude: 120.194861
            }
          ],
          selectable: true,
          lineDashType: 2
        }
      ]
    }
  },
  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>