chenJinxu
/
TelpoH5FrontendWeb
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Merge branch 'feature-gaode' into develop

feat
JinxChen il y a 2 ans
Parent
c273068bc3 62729198bb
révision
dcb0fce8e9
11 fichiers modifiés avec 220 ajouts et 17 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  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 Voir le fichier

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


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

+ 152
- 0
public/gaode.html Voir le fichier

@@ -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 Voir le fichier

@@ -1,8 +1,8 @@
<!--
* @Date: 2022-01-19 10:08:26
* @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:
-->
<!DOCTYPE html>


+ 4
- 3
src/App.vue Voir le fichier

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

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


+ 2
- 2
src/config/models.js Voir le fichier

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


+ 1
- 1
src/main.js Voir le fichier

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


+ 10
- 0
src/pages/gaode.js Voir le fichier

@@ -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 Voir le fichier

@@ -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 Voir le fichier

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

Vue.use(VueRouter);

const routes = [
{ path: '/', redirect: 'index' },
{ 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) },

// 高德地图测试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 Voir le fichier

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


+ 18
- 2
vue.config.js Voir le fichier

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

module.exports = {
publicPath: './',
// 注意： 多页面配置 不再使用全路径，单页面时可以开启
/* publicPath: './', */
outputDir: 'dist',
// assetsDir: 'static',
// lintOnSave: process.env.NODE_ENV === 'development',
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: {
port: port,
open: true,


Écrire Aperçu
Chargement…
Annuler
Enregistrer