feature

- 增加 一个高德demo 判断一个点是否在一个多边形围栏内

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-09 11:30:39
+ * @LastEditTime: 2022-05-10 11:09:08
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -91,4 +91,10 @@ feature
 ### v1.0.3
 `2022.05.09`
 feature
-- 增加 支付宝花呗支付页面
+- 增加 支付宝花呗支付页面
+
+### v1.0.4
+`2022.05.10`
+feature
+- 增加 一个高德demo 判断一个点是否在一个多边形围栏内
+- 增加 引入高德地图api

src/config/models.js

@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-09 11:30:58
+ * @LastEditTime: 2022-05-10 11:07:57
  * @FilePath: \AntpayFrontEnd\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.3'; //版本号
+export const VERSION_MODEL = '1.0.4'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-04-13 11:15:53
+ * @LastEditTime: 2022-05-09 14:24:03
  * @FilePath: \AntpayFrontEnd\src\router\index.js
  * @description:
  */
@@ -33,6 +33,9 @@ const routes = [
     // 分销商模式- 信息录入
     { path: '/form-dealers', name: 'form-dealers', component: resolve => require(['@/views/alipay-dealers/AlipayFormDealers'], resolve) },
 
+    // 高德地图测试demo
+    { path: '/gaode-point-in-ring', name: 'gaode-point-in-ring', component: resolve => require(['@/views/gaode-demo/PointInRing'], resolve) },
+
 
 
 ];

src/views/gaode-demo/PointInRing.vue

@@ -0,0 +1,134 @@
+<template>
+    <div id="map">
+        <div class="tips">
+            <p>{{this.tips}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import MapLoader from '@/config/map';
+export default {
+  name:'point-in-ring',
+  data(){
+   return {
+       map: {
+           instance: null,
+           zoom: 13,
+           center: [113.121586,23.021351], //
+           marker: null,
+           polygon: null,
+       }, //创建地图参数
+       polyLnglAtList: [
+           [113.102037, 23.041415],
+           [113.137954, 23.045997],
+           [113.142029, 23.016554],
+           [113.105961, 23.014332]
+       ], //绘制多边形围栏数据数组
+
+       isPointInRing: null, //是否在围栏内
+   }
+  },
+  computed: {
+      tips() {
+          return this.isPointInRing ? '该点在围栏内' : '该点在围栏外';
+      }
+  },
+  created() {
+    this.getMap();
+  },
+  mounted() {
+      setTimeout(() => {
+        this.createPolygon();
+        this.createMarker();
+        this.computeMarker();
+      }, 2000)
+  },
+  methods: {
+    //   getMap 创建地图
+    getMap() {
+        console.log("地图加载重");
+        const plugins = [
+                    'AMap.Geocoder',
+                    'AMap.GraspRoad',
+                    'AMap.GeometryUtil',
+                    'AMap.CitySearch',
+                    'AMap.ToolBar',
+        ];
+        MapLoader(false, plugins).then(
+            AMap => {
+                // 地图实例
+                let that = this;
+                that.map.instance = new AMap.Map('map', {
+                    center: that.map.center,
+                    resizeEnable: true,
+                    zoom: that.map.zoom,
+                });
+                const toolBar = new AMap.ToolBar({ offset: new AMap.Pixel(10, 310), position: 'LT' });
+                this.map.instance.addControl(toolBar);
+            },
+            e => {
+                console.log("加载地图失败，下面是报错数据");
+                console.log(e);
+            }
+        )
+
+    },
+    // 创建围栏
+    createPolygon() {
+        this.map.polygon = new AMap.Polygon({
+            map: this.map.instance,
+            fillOpacity: 0.1,
+            path: this.polyLnglAtList
+        });
+    },
+    // 创建marker
+    createMarker() {
+        let content = `
+            <div class="marker_avatar">
+                <div class="avatar">
+                    <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" />
+
+                </div>
+            </div>`;
+        let center = this.map.center;
+        this.map.marker = new AMap.Marker({
+            position: center,
+            draggable:true,
+
+        });
+        // 注册拖拽事件
+        this.map.marker.on('dragging', this.computeMarker);
+        this.map.instance.add(this.map.marker);
+        this.map.instance.setCenter(center);
+    },
+    // 拖拽marker
+    computeMarker() {
+        let point = this.map.marker.getPosition();
+        this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.polyLnglAtList);
+        console.log("是否在围栏内部::", this.isPointInRing );
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    #map {
+        height:100%;
+        width: 100%;
+        z-index: 99;
+        .tips {
+            height: 80px;
+            width: 150px;
+            line-height: 80px;
+            color: red;
+            background: wheat;
+            position: absolute;
+            top: 20px;
+            left: 20%;
+            text-align: center;
+            font-size: 16px;
+            z-index: 9999;
+        }
+    }
+</style>