Browse Source

- 增加 坐标点显示

feat
JinxChen 2 years ago
parent
commit
5584a1be88
2 changed files with 30 additions and 9 deletions
  1. +3
    -2
      README.md
  2. +27
    -7
      src/views/gaode-demo/PointInRing.vue

+ 3
- 2
README.md View File

@@ -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
- 增加 圆形围栏判断 一个点是否在圆形围栏内
- 增加 圆形围栏判断 一个点是否在圆形围栏内
- 增加 坐标点显示

+ 27
- 7
src/views/gaode-demo/PointInRing.vue View File

@@ -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>

Loading…
Cancel
Save