From 07f37b6d58f21ddac2abbfcbc93fb62013ef4e17 Mon Sep 17 00:00:00 2001
From: xuyi2 <xuyi2@liepin.com>
Date: Tue, 26 Apr 2022 10:11:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9C=86=E5=BD=A2=E6=A0=87?=
 =?UTF-8?q?=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/docs/_sidebar.md                       |  1 +
 src/docs/zh-cn/marker/circle-marker.md     | 94 ++++++++++++++++++++++
 src/lib/components/marker/CircleMarker.vue | 75 +++++++++++++++++
 src/lib/index.js                           |  2 +
 4 files changed, 172 insertions(+)
 create mode 100644 src/docs/zh-cn/marker/circle-marker.md
 create mode 100644 src/lib/components/marker/CircleMarker.vue

diff --git a/src/docs/_sidebar.md b/src/docs/_sidebar.md
index 67ae8cd..3745ea6 100644
--- a/src/docs/_sidebar.md
+++ b/src/docs/_sidebar.md
@@ -49,6 +49,7 @@
   - [GLTF](zh-cn/threejs/gltf.md)
 - 点标记
   - [点标记](zh-cn/marker/marker.md)
+  - [圆形标记](zh-cn/marker/circle-marker.md)
   - [标注](zh-cn/marker/label-marker.md)
   - [文本](zh-cn/marker/text.md)
   - [灵活点标记](zh-cn/marker/elastic-marker.md)
diff --git a/src/docs/zh-cn/marker/circle-marker.md b/src/docs/zh-cn/marker/circle-marker.md
new file mode 100644
index 0000000..c6da5c8
--- /dev/null
+++ b/src/docs/zh-cn/marker/circle-marker.md
@@ -0,0 +1,94 @@
+# 圆形标记 (AMap.CirCleMarker)
+
+## 基础示例
+
+<vuep template="#example"></vuep>
+
+<script v-pre type="text/x-template" id="example">
+
+  <template>
+    <div class="amap-page-container">
+      <el-amap :zoom="zoom" :center="center" class="amap-demo">
+        <el-amap-circle-marker v-for="(marker, index) in markers" :key="index" :center="marker.center" @click="(e) => {clickArrayMarker(marker, e)}"></el-amap-circle-marker>
+      </el-amap>
+    </div>
+  </template>
+
+  <style>
+    .amap-demo {
+      height: 300px;
+    }
+  </style>
+
+  <script>
+    module.exports = {
+      name: 'amap-page',
+      data() {
+        return {
+          zoom: 14,
+          center: [121.5273285, 31.21515044],
+          markers: [
+            {
+              center: [121.5273285, 31.21515044],
+              id: 1
+            },
+          ],
+        };
+      },
+      methods: {
+        clickArrayMarker(marker){
+          alert('点击了标号,标号ID： '+ marker.id)
+        }
+      }
+    };
+  </script>
+
+</script>
+
+
+## 动态属性
+支持响应式。
+
+名称 | 类型 | 说明
+---|---|---|
+center | Array | 圆心位置
+visible | Boolean | 是否隐藏
+radius | Number | 圆点半径，单位:px
+zIndex | Number | 层叠顺序默认zIndex:10
+bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上 （自v1.3 新增）默认值：false
+strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600
+strokeOpacity | String | 轮廓线透明度，取值范围0,1，0表示完全透明，1表示不透明。默认为0.9
+strokeWeight | Number | 轮廓线宽度
+fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
+fillOpacity | String | 圆形填充透明度，取值范围0,1，0表示完全透明，1表示不透明。默认为0.9
+extData | Object | 用户自定义属性，支持JavaScript API任意数据类型，如Circle的id等
+
+## ref 可用方法
+提供无副作用的同步帮助方法
+
+函数 | 返回 | 说明
+---|---|---|
+$$getInstance() | [AMap.CircleMarker](http://lbs.amap.com/api/javascript-api/reference/overlay#CircleMarker) | 获取`CircleMarker`实例
+
+
+## 事件
+
+事件 | 参数 | 说明
+---|---|---|
+click | MapsEvent | 鼠标左键单击事件
+dblclick | MapsEvent | 鼠标左键双击事件
+rightclick | MapsEvent | 鼠标右键单击事件
+mousemove | MapsEvent | 鼠标移动
+mouseover | MapsEvent | 鼠标移近点标记时触发事件
+mouseout | MapsEvent | 鼠标移出点标记时触发事件
+mousedown | MapsEvent | 鼠标在点标记上按下时触发事件
+mouseup | MapsEvent | 鼠标在点标记上按下后抬起时触发事件
+dragstart | MapsEvent | 开始拖拽点标记时触发事件
+dragging | MapsEvent | 鼠标拖拽移动点标记时触发事件
+dragend | MapsEvent | 点标记拖拽移动结束触发事件
+moving | Object | 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.<LngLat>}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。
+moveend | |点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发
+movealong | |点标记执行moveAlong动画一次后触发事件
+touchstart | MapsEvent | 触摸开始时触发事件，仅适用移动设备
+touchmove | MapsEvent | 触摸移动进行中时触发事件，仅适用移动设备
+touchend | MapsEvent | 触摸结束时触发事件，仅适用移动设备
\ No newline at end of file
diff --git a/src/lib/components/marker/CircleMarker.vue b/src/lib/components/marker/CircleMarker.vue
new file mode 100644
index 0000000..977cc5d
--- /dev/null
+++ b/src/lib/components/marker/CircleMarker.vue
@@ -0,0 +1,75 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import registerMixin from '../../mixins/register-component';
+
+export default {
+  name: 'el-amap-circle-marker',
+  mixins: [registerMixin],
+  props: {
+    vid: {
+      type: String
+    },
+    zIndex: {
+      type: Number
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    center: {
+      type: Array,
+      $type: 'LngLat'
+    },
+    bubble: {
+      type: Boolean
+    },
+    radius: {
+      type: Number
+    },
+    strokeColor: {
+      type: String
+    },
+    strokeOpacity: {
+      type: Number
+    },
+    strokeWeight: {
+      type: Number
+    },
+    fillColor: {
+      type: String
+    },
+    fillOpacity: {
+      type: Number
+    },
+    extData: {
+      type: Object
+    }
+  },
+
+  data() {
+    return {
+      converters: {},
+      handlers: {}
+    };
+  },
+
+  methods: {
+    __initComponent(options) {
+      this.$parentComponent = this.parentInstance.$amapComponent;
+      this.$amapComponent = new AMap.CircleMarker(options);
+      this.$parentComponent.add(this.$amapComponent);
+    },
+    destroyComponent() {
+      this.$parentComponent.remove(this.$amapComponent);
+      this.$amapComponent = null;
+    }
+  },
+  render() {
+    return null;
+  },
+  destroyed() {}
+};
+</script>
diff --git a/src/lib/index.js b/src/lib/index.js
index f241611..f5f5d04 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -38,6 +38,7 @@ import Text from './components/marker/Text';
 import ElasticMarker from './components/marker/ElasticMarker';
 import MarkerCluster from './components/marker/MarkerCluster';
 import MassMarks from './components/marker/MassMarks';
+import CircleMarker from './components/marker/CircleMarker';
 
 // 信息窗体
 import InfoWindow from './components/infoWindow/InfoWindow';
@@ -107,6 +108,7 @@ let components = [
   ElasticMarker,
   MarkerCluster,
   MassMarks,
+  CircleMarker,
 
   InfoWindow,
 
-- 
Gitee