- 增加 坐标点显示

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-10 15:45:40
+ * @LastEditTime: 2022-05-10 16:51:55
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -98,4 +98,5 @@ feature
 feature
 - 增加 一个高德demo 判断一个点是否在一个多边形围栏内
 - 增加 引入高德地图api
-- 增加 圆形围栏判断 一个点是否在圆形围栏内
+- 增加 圆形围栏判断 一个点是否在圆形围栏内
+- 增加 坐标点显示

src/views/gaode-demo/PointInRing.vue

@@ -1,7 +1,11 @@
 <template>
-    <div id="map">
+    <div id="map" ref="mapContainer">
         <div class="tips" v-if="isShowTips">
             <p>{{this.tips}}</p>
+            <p>当前点坐标:</p>
+            <van-field v-model="map.center"></van-field>
+            <p>绘制的围栏坐标数组：</p>
+            <van-field v-model="polyList" type="textarea"></van-field>
         </div>
     </div>
 </template>
@@ -16,7 +20,7 @@ export default {
        map: {
            instance: null,
            zoom: 13,
-           center: '' /* || [113.121586,23.021351] */, //
+           center: null /* || [113.121586,23.021351] */, //
            marker: null,
            polygon: null,
            radius: '',
@@ -25,11 +29,15 @@ export default {
 
        isPointInRing: null, //是否在围栏内
        isShowTips: false, //是否显示tips, 默认false，等到围栏加载完才显示
+       /* polyList: '', */
    }
   },
   computed: {
       tips() {
           return this.isPointInRing ? '该点在围栏内' : '该点在围栏外';
+      },
+      polyList() {
+          return this.polyLnglAtList.toString();
       }
   },
   created() {
@@ -141,10 +149,17 @@ export default {
        /*  let point = this.map.marker.getPosition();
         this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.map.center); */
         let point = this.map.marker.getPosition();
+        console.log("point", point, typeof point);
+        this.map.center = point.toString();
         /* console.log("是否在多边形围栏内部::", this.isPointInRing ); */
         // 判断一个坐标点是否在一个圆形内
-         this.isPointInRing = this.map.polygon.contains(point);
+        this.isPointInRing = this.map.polygon.contains(point);
         console.log("是否在圆形围栏内部", this.map.polygon.contains(point));
+        let divBox = document.createElement('span');
+        divBox.innerHTML = this.isPointInRing;
+        divBox.className = 'fence';
+        document.body.appendChild(divBox);
+        console.log("map-container", this.$refs.mapContainer);
     }
   }
 }
@@ -156,17 +171,22 @@ export default {
     width: 100%;
     z-index: 99;
     .tips {
-        height: 80px;
-        width: 40%;
-        line-height: 80px;
+        height: 200px;
+        width: 90%;
+        padding: 5px;
+        overflow: scroll;
+       /*  line-height: 80px; */
         color: red;
         background: wheat;
         position: absolute;
         top: 20px;
-        left: 10%;
+        left: 5%;
         text-align: center;
         font-size: 16px;
         z-index: 9999;
+        p {
+            padding: 10px;
+        }
     }
 }
 </style>