diff --git a/README.md b/README.md index 8f33dd1..0aa2ab5 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -98,4 +98,5 @@ feature feature - 增加 一个高德demo 判断一个点是否在一个多边形围栏内 - 增加 引入高德地图api -- 增加 圆形围栏判断 一个点是否在圆形围栏内 \ No newline at end of file +- 增加 圆形围栏判断 一个点是否在圆形围栏内 +- 增加 坐标点显示 \ No newline at end of file diff --git a/src/views/gaode-demo/PointInRing.vue b/src/views/gaode-demo/PointInRing.vue index 0f00233..d50609e 100644 --- a/src/views/gaode-demo/PointInRing.vue +++ b/src/views/gaode-demo/PointInRing.vue @@ -1,7 +1,11 @@ @@ -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; + } } }