当前位置: 首页 > 文档资料 > vue-amap 中文文档 >

1.4.9 椭圆

优质
小牛编辑
125浏览
2023-12-01

基础示例

<vuep template="#example"></vuep>

<script v-pre type="text/x-template" id="example">

   <template>
     <div class="amap-page-container">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
          <el-amap-ellipse v-for="ellipse in ellipses" :events="ellipse.events" :center="ellipse.center" :radius="ellipse.radius"></el-amap-ellipse>
        </el-amap>
      </div>
  </template>

  <style>
    .amap-page-container {
      height: 200px;
    }
  </style>

  <script>
    module.exports = {
      data () {
        return {
          zoom: 12,
          center: [121.5273285, 31.21515044],
          ellipses: [
            {
              center: [121.5273285, 31.21515044],
              radius: [500, 1000],
              events: {
                click: () => {
                  alert('click');
                }
              }
            }
          ]
        }
      }
    };
  </script>

</script>

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增)默认值:false

动态属性

支持响应式。

名称类型说明
visibleBoolean是否可见
editableBoolean当前圆形是否可编辑
centerLngLat圆心位置
radiusArray椭圆的半径,用2个元素的数组表示,单位:米 如: radius: [1000, 2000]表示横向半径是1000,纵向的半径是2000 默认值:[1000, 1000]
zIndexNumber层叠顺序默认zIndex:10
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityFloat轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber轮廓线宽度
fillColorString圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
fillOpacityFloat圆形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeStyleString轮廓线样式,实线:solid,虚线:dashed
extDataAny用户自定义属性,支持JavaScript API任意数据类型,如Circle的id等

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.CircleEllipse获取CircleMarker实例

事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
movingObject点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。
moveend点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备