chenJinxu
/
TelpoH5FrontendWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'feature-gaode' into develop

feat
JinxChen 2 years ago
parent
c273068bc3 62729198bb
commit
dcb0fce8e9
11 changed files with 220 additions and 17 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -2
      README.md
  2. +152
    -0
      public/gaode.html
  3. +2
    -2
      public/index.html
  4. +4
    -3
      src/App.vue
  5. +2
    -2
      src/config/models.js
  6. +1
    -1
      src/main.js
  7. +10
    -0
      src/pages/gaode.js
  8. +19
    -0
      src/pages/gaode.vue
  9. +2
    -3
      src/router/index.js
  10. +2
    -2
      src/views/gaode-demo/PointInRing.vue
  11. +18
    -2
      vue.config.js

+ 8
- 2
README.md View File

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


### v1.0.5
`2022.05.11`
feature
- 增加 多页面配置

+ 152
- 0
public/gaode.html View File

@@ -0,0 +1,152 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>高德地图demo</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6e4a6c39ea6d18b8dd3151baa3a7c0d5"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
html,body,#container{
height: 100%
}
.info {
height: 100px;
width: 250px;
z-index: 9999;
position: absolute;
top: 20px;
left: 20%;
background-color: wheat;
text-align: center;
}
</style>
</head>
<body>
<div id="container"></div>
<div class='info'>
<p>拖动marker可调整位置</p>
<input type="text" id="text"/>
</div>
<script script type="text/javascript">

/* var textBox = new AMap.Text({
map: map,
position: new AMap.LngLat(116.40109,39.919728),
offset: new AMap.Pixel(-20, -40),
style:{
'background-color':'yellow',
'border':'solid 1px #0088ff',
'padding':'10px 20px'
}
}) */
// 获取url的参数
function getQueryString() {
var url = window.location.hash;
console.log(url); //获取url中"?"符后的字串
let theRequest = new Object();
if (url.indexOf("?") != -1) {
let str = url.substr(8);
console.log("str", str);
strs = str.split("&");
for(let i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var params = getQueryString();
console.log(params.polygon);
var polyLnglAtList = params.polygon.split(';').map(item => {
return item.split(',');
});
var radius = Number(params.radius);
console.log("radius", radius);
var center = params.center.split(',');
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13,
center: center
});
console.log("polyLnglAtList", polyLnglAtList);
var marker = new AMap.Marker({
map: map,
draggable:true,
position: center
});
function createPoly() {
// 创建地图
// 判断是多边形还是圆形 数组length为1 是圆形
if (polyLnglAtList.length === 1) {
// 创建点
var polygon = new AMap.Circle({
center: center,
radius: radius, //半径
borderWeight: 3,
strokeColor: "red",
strokeWeight: 6,
strokeOpacity: 0.5,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: 'green',
zIndex: 50,
});
map.add(polygon)
return polygon
} else {
// 否则是多边形
var polygon = new AMap.Polygon({
map: map,
fillOpacity: 0.4,
path: polyLnglAtList
});
return polygon
}
};
// 绑定拖拽事件
function compute() {
var point = marker.getPosition();
console.log("当前坐标点::", point);
/* var isPointInRing = AMap.GeometryUtil.isPointInRing(point,polyLnglAtList); */
var newPolygon = createPoly();
console.log("newPolygon", newPolygon);
var isPointInRing = newPolygon.contains(point);
marker.setLabel({
content: isPointInRing ? '在内部'+ point : '在外部' + point,
offset:new AMap.Pixel(20,0)
});
// 双向绑定
var input = document.querySelector("#text");
var data = {};
Object.defineProperty(data, "name", {
configurable: true,
get: function(){
return input.value
},
set: function(newValue){
//this.value = newValue;
input.value = newValue;
}
})
data.name = point.toString();
input.onchange = function(){
data.name = data.name;
};
let divBox = document.createElement('span');
divBox.innerHTML = isPointInRing;
divBox.className = 'fence';
document.body.appendChild(divBox);
console.log("该点是否在围栏内::", isPointInRing);
}
createPoly();
compute();
marker.on('dragging',compute)
map.setFitView();
</script>
<div id="gaode"></div>
</body>
</html>

+ 2
- 2
public/index.html View File

@@ -1,8 +1,8 @@
<!-- <!--
* @Date: 2022-01-19 10:08:26 * @Date: 2022-01-19 10:08:26
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2022-02-16 10:52:18
* @FilePath: \alipay-scan-code-front-end\public\index.html
* @LastEditTime: 2022-05-11 10:41:39
* @FilePath: \AntpayFrontEnd\public\index.html
* @description: * @description:
--> -->
<!DOCTYPE html> <!DOCTYPE html>


+ 4
- 3
src/App.vue View File

@@ -1,7 +1,7 @@
<!-- <!--
* @Date: 2022-01-19 10:08:26 * @Date: 2022-01-19 10:08:26
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2022-04-14 09:50:16
* @LastEditTime: 2022-05-10 18:25:55
* @FilePath: \AntpayFrontEnd\src\App.vue * @FilePath: \AntpayFrontEnd\src\App.vue
* @description: * @description:
--> -->
@@ -25,7 +25,8 @@ export default {
} }
}, },
mounted() { mounted() {
console.log("当前版本号::", VERSION_MODEL, "当前环境::", process.env.NODE_ENV);
console.log("当前版本号::", VERSION_MODEL, "当前环境::", process.env.NODE_ENV, this.$title);

}, },
methods: { methods: {
reload() { reload() {
@@ -33,7 +34,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.isRouterAlive = true; this.isRouterAlive = true;
}); });
}
},
} }
} }
</script> </script>


+ 2
- 2
src/config/models.js View File

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


+ 1
- 1
src/main.js View File

@@ -1,7 +1,7 @@
/* /*
* @Date: 2022-01-19 10:08:26 * @Date: 2022-01-19 10:08:26
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2022-04-12 15:07:40
* @LastEditTime: 2022-05-11 14:24:55
* @FilePath: \AntpayFrontEnd\src\main.js * @FilePath: \AntpayFrontEnd\src\main.js
* @description: * @description:
*/ */


+ 10
- 0
src/pages/gaode.js View File

@@ -0,0 +1,10 @@
import Vue from 'vue';
import gaode from './gaode.vue';
import router from '../router';
import store from '../store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(gaode),
}).$mount("#gaode");

+ 19
- 0
src/pages/gaode.vue View File

@@ -0,0 +1,19 @@
<template>
<div id="gaode">
</div>
</template>

<script>
export default {
name:'gaode',
data(){
return {

}
}
}
</script>

<style scoped>

</style>

+ 2
- 3
src/router/index.js View File

@@ -1,7 +1,7 @@
/* /*
* @Date: 2022-01-19 10:08:26 * @Date: 2022-01-19 10:08:26
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2022-05-09 14:24:03
* @LastEditTime: 2022-05-11 14:24:34
* @FilePath: \AntpayFrontEnd\src\router\index.js * @FilePath: \AntpayFrontEnd\src\router\index.js
* @description: * @description:
*/ */
@@ -11,7 +11,6 @@ import Nprogress from "nprogress";
import "nprogress/nprogress.css"; import "nprogress/nprogress.css";


Vue.use(VueRouter); Vue.use(VueRouter);

const routes = [ const routes = [
{ path: '/', redirect: 'index' }, { path: '/', redirect: 'index' },
{ path: '/index', name: 'index', component: resolve => require(['@/views/AliPayIndex'], resolve) }, { path: '/index', name: 'index', component: resolve => require(['@/views/AliPayIndex'], resolve) },
@@ -34,7 +33,7 @@ const routes = [
{ path: '/form-dealers', name: 'form-dealers', component: resolve => require(['@/views/alipay-dealers/AlipayFormDealers'], resolve) }, { path: '/form-dealers', name: 'form-dealers', component: resolve => require(['@/views/alipay-dealers/AlipayFormDealers'], resolve) },


// 高德地图测试demo // 高德地图测试demo
{ path: '/gaode-point-in-ring', name: 'gaode-point-in-ring', component: resolve => require(['@/views/gaode-demo/PointInRing'], resolve) },
{ path: '/gaode-point-in-ring', name: 'gaode-point-in-ring', component: resolve => require(['@/views/gaode-demo/PointInRing'], resolve),},








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

@@ -1,6 +1,6 @@
<template> <template>
<div id="map" ref="mapContainer"> <div id="map" ref="mapContainer">
<div class="tips" v-if="isShowTips">
<div class="tips" v-if="isShowTips" >
<p>{{this.tips}}</p> <p>{{this.tips}}</p>
<p>当前点坐标:</p> <p>当前点坐标:</p>
<van-field v-model="map.center"></van-field> <van-field v-model="map.center"></van-field>
@@ -160,7 +160,7 @@ export default {
divBox.className = 'fence'; divBox.className = 'fence';
document.body.appendChild(divBox); document.body.appendChild(divBox);
console.log("map-container", this.$refs.mapContainer); console.log("map-container", this.$refs.mapContainer);
}
}
} }
} }
</script> </script>


+ 18
- 2
vue.config.js View File

@@ -1,7 +1,7 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2020-04-15 10:00:32 * @Date: 2020-04-15 10:00:32
* @LastEditTime: 2022-05-10 09:59:17
* @LastEditTime: 2022-05-11 14:26:01
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \AntpayFrontEnd\vue.config.js * @FilePath: \AntpayFrontEnd\vue.config.js
@@ -9,11 +9,27 @@
const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port


module.exports = { module.exports = {
publicPath: './',
// 注意： 多页面配置 不再使用全路径，单页面时可以开启
/* publicPath: './', */
outputDir: 'dist', outputDir: 'dist',
// assetsDir: 'static', // assetsDir: 'static',
// lintOnSave: process.env.NODE_ENV === 'development', // lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false, productionSourceMap: false,
// 多页面配置
pages: {
// 先配置主页
index: {
entry: './src/main.js',
template: './public/index.html',
/* title: '用户登录' */
},
// 再配置各个子页面：登录后课表查询页
gaode: {
entry: './src/pages/gaode.js',
template: './public/gaode.html',
title: '高德地图demo'
}
},
devServer: { devServer: {
port: port, port: port,
open: true, open: true,


Write Preview
Loading…
Cancel
Save