投放点标记点优化

2c2c2c
1 parent 40c1ead7
Showing 1 changed file with 18 additions and 12 deletions
trash-ui/src/views/unit/dropPointInfo/index.vue
@@ -244,9 +244,9 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="坐标点" prop="coordinatePoint">
-              <el-input v-model="form.coordinatePoint" placeholder="请输入坐标点经纬度" readonly/>
+              <el-input v-model="form.coordinatePoint" placeholder="请输入坐标点经纬度" readonly @click.native="handleOpenMap"/>
             </el-form-item>
-            <el-button type="primary" @click="handleOpenMap">坐标点</el-button>
+<!--            <el-button type="primary" @click="handleOpenMap">坐标点</el-button>-->
           </el-col>
         </el-row>
       </el-form>
@@ -286,7 +286,7 @@
       </div>
       <div v-loading="loading" id="dropPointInfoContainer" class="am-map" style="width:100%;height: 700px;"></div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="clearCoordinatePoint">清除坐标点</el-button>
+<!--        <el-button type="primary" @click="clearCoordinatePoint">清除坐标点</el-button>-->
         <el-button type="primary" @click="openMap = false">确 定</el-button>
       </div>
     </el-dialog>
@@ -561,6 +561,7 @@ export default {
       mapOptions: [],
       openMap:false,
       center: null,
+      circleMarker: null,
     };
   },
   created() {
@@ -572,6 +573,7 @@ export default {
       this.center = null;
       this.form.coordinatePoint = null;
       this.map = null;
+      this.circleMarker = null;
       this.initAMap();
     },
     handleOpenMap(){
@@ -609,7 +611,7 @@ export default {
           var radius = 10 //单位:px
  
           //创建圆形点标记 CircleMarker 实例
-          var circleMarker = new AMap.CircleMarker({
+          _this.circleMarker = new AMap.CircleMarker({
             center: _this.center, //圆心
             radius: radius, //半径
             strokeColor: "white", //轮廓线颜色
@@ -621,14 +623,19 @@ export default {
             cursor: "pointer", //鼠标悬停时的鼠标样式
           });
           //圆形 circleMarker 对象添加到 Map
-          _this.map.add(circleMarker);
+          _this.map.add(_this.circleMarker);
           //将覆盖物调整到合适视野
-          _this.map.setFitView([circleMarker]);
-
-          _this.form.coordinatePoint = e.lnglat.lng+","+e.lnglat.lat;
+          _this.map.setFitView([_this.circleMarker]);
         }
         // 监听地图点击事件
         _this.map.on("click", (e) => {
+          console.log(e)
+          if(_this.center!=null){
+            _this.map.remove(_this.circleMarker);
+            _this.center = null;
+            _this.form.coordinatePoint = null;
+          }
+
           //判断是否已有圆点标记
           if(_this.center==null){
             //设置圆形位置
@@ -637,7 +644,7 @@ export default {
             var radius = 10 //单位:px
  
             //创建圆形点标记 CircleMarker 实例
-            var circleMarker = new AMap.CircleMarker({
+            _this.circleMarker = new AMap.CircleMarker({
               center: _this.center, //圆心
               radius: radius, //半径
               strokeColor: "white", //轮廓线颜色
@@ -649,10 +656,9 @@ export default {
               cursor: "pointer", //鼠标悬停时的鼠标样式
             });
             //圆形 circleMarker 对象添加到 Map
-            _this.map.add(circleMarker);
+            _this.map.add(_this.circleMarker);
             //将覆盖物调整到合适视野
-            _this.map.setFitView([circleMarker]);
-
+            _this.map.setFitView([_this.circleMarker]);
             _this.$set(_this.form, "coordinatePoint", e.lnglat.lng+","+e.lnglat.lat);
           }
         });