地图上的多边形

使用时包含在<map>标签内

<map-polygon>定义地图上的多边形

属性

属性	类型	demo	描述
path	array	[[116.487, 40.00003],[113.487, 40.0002]...]	多边形轮廓线的节点坐标数组
fill-color	string	#000	多边形填充颜色
fill-opacity	string	#000	多边形填充透明度
stroke-color	string	#000	线条颜色
stroke-width	number	2	线条宽度
stroke-opacity	number	0.5	线条透明度[0-1]
stroke-style	string	solid	线条的样式实线:solid，虚线:dashed

代码展示

<template>
  <div class="container">
    <navbar title="设置多边形"></navbar>
    <map class="map" ref="map2017" :sdk-key="keys" :zoom="zoom" :center="pos">
      <map-polygon :path="path" fill-opacity="0.5" fill-color="#2ecc71" fill-width="4"></map-polygon>
    </map>
    <div class="map-control">
      <text class="title">Componenet: map-polygon</text>
      <text class="tips">weex-amap-polygon 可以在地图上绘制多边形</text>
    </div>
  </div>
</template>

<style scoped>
  .container{
    position: relative;
    flex:1;
    background-color: #fff;
  }
  .map{
    flex: 1;
    position: relative;
    background-color: #fff;
    min-height: 800px;
    border-bottom-width: 10px;
    border-bottom-color: #fff;
  }
  .map-control{
    padding-top: 20px;
    min-height: 600px;
  }
  .title{
    margin-left: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 36px;
    border-left-width: 6px;
    border-left-color: #0f89f5;
    color: #222;
    text-align: left;
  }
  .tips{
    margin: 20px;
    padding: 10px;
    color:#666;
    font-size: 20px;
  }
</style>

<script>
var Amap = null;
try {
  Amap = weex.requireModule('mapApi');
} catch (err) {
  console.log(err);
}
var polygonArr = new Array(); //多边形覆盖物节点坐标数组
polygonArr.push([116.403322, 39.920255]);
polygonArr.push([116.410703, 39.897555]);
polygonArr.push([116.402292, 39.892353]);
polygonArr.push([116.389846, 39.891365]);
module.exports = {
  components: {
    navbar: require('../include/navbar.vue')
  },

  props: {
    keys: {
      default: function () {
        return {
          h5: 'f4b99dcd51752142ec0f1bdcb9a8ec02',
          ios: '',
          android: 'db6a973159cb0c2639ad02c617a786ae'
        };
      }
    },
    pos: {
      default: function () {
        return [116.397428, 39.90923];
      }
    },
    path: {
      default: polygonArr
    },
    zoom: {
      default: 13
    }
  },

  methods: {}
};
</script>

# 地图上的多边形

# 属性

# 代码展示

# 效果展示

地图上的多边形

属性

代码展示

效果展示