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

feature 

- 增加 多页面配置
feat
JinxChen 2 years ago
parent
5584a1be88
commit
6f2c9299e0
10 changed files with 218 additions and 15 deletions
Split 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. +1
    -1
      src/main.js
  6. +10
    -0
      src/pages/gaode.js
  7. +19
    -0
      src/pages/gaode.vue
  8. +2
    -3
      src/router/index.js
  9. +2
    -2
      src/views/gaode-demo/PointInRing.vue
  10. +18
    -2
      vue.config.js

+ 8
- 2
README.md View File

@@ -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 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
* @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 View File

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


+ 1
- 1
src/main.js View File

@@ -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 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
* @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 View File

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

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


Write Preview
Loading…
Cancel
Save