地图上的圆形

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

<map-circle>定义地图上的圆形

属性

属性	类型	demo	描述
center	array	[116.346, 40.234234]	圆形位置
radius	number	50	圆的半径
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-circle :center="pos" radius="7000" fill-color="#2ecc71" fill-width="4"></map-circle>
    </map>
    <div class="map-control">
      <text class="title">Componenet: map-circle</text>
      <text class="tips">可以在地图上绘制圆形</text>
    </div>
  </div>
</template>

<style scope>
  .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);
}
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];
      }
    },
    zoom: {
      default: 9
    }
  }
};
</script>

# 地图上的圆形

# 属性

# 代码展示

# 效果展示

地图上的圆形

属性

代码展示

效果展示