From d9899f1fb0d130e792db6546f003f8dd33603442 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Sun, 09 May 2021 15:24:49 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
---
public/xcxh5map/js/getUrlData.js | 10 +
src/router/page/index.js | 22 +-
public/xcxh5map/lid/leaflet.js | 0
public/xcxh5map/lid/leaflet.markercluster-src.js | 0
public/xcxh5map/map.html | 111 ++++--------------
public/xcxh5map/lid/MarkerCluster.Default.css | 0
public/xcxh5map/js/wx.js | 0
public/xcxh5map/css/body.css | 11 +
public/xcxh5map/popup/user.html | 40 ++++++
/dev/null | 28 ----
public/xcxh5map/js/def.js | 4
public/xcxh5map/js/startMap.js | 7 +
public/xcxh5map/js/createMap.js | 95 +++++++++++++++
public/xcxh5map/lid/leaflet.css | 0
public/xcxh5map/lid/MarkerCluster.css | 0
15 files changed, 203 insertions(+), 125 deletions(-)
diff --git a/public/xcxh5map/css/body.css b/public/xcxh5map/css/body.css
new file mode 100644
index 0000000..04d9e3b
--- /dev/null
+++ b/public/xcxh5map/css/body.css
@@ -0,0 +1,11 @@
+body {
+ padding: 0;
+ margin: 0;
+}
+
+html,
+body,
+#map {
+ height: 100%;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/public/xcxh5map/js/createMap.js b/public/xcxh5map/js/createMap.js
new file mode 100644
index 0000000..f3d4d17
--- /dev/null
+++ b/public/xcxh5map/js/createMap.js
@@ -0,0 +1,95 @@
+function beginJuheMap(map, data) {
+ map = L.map('map', { //初始化地图
+ center: [31.87, 120.54],
+ zoom: 12,
+ // crs: L.CRS.EPSG4326, //设置坐标系4326
+ attributionControl: false, //去掉右下角
+ zoomControl: false, //去掉缩放
+ });
+ L.tileLayer( //添加切片图层
+ "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
+ subdomains: ["1", "2", "3", "4"],
+ attribution: "高德"
+ }
+ ).addTo(map);
+ var markers = L.markerClusterGroup();
+
+ var transportIcon = L.Icon.extend({ //图标初始化
+ options: {
+ iconSize: [30, 30], // 图标尺寸
+ // iconAnchor: [30, 30], // 图标偏移量
+ // popupAnchor: [-20, -20] // 弹出框偏移量
+ }
+ });
+ var carIcon = new transportIcon({ //引入图标
+ iconUrl: './img/gray.png'
+ }),
+ planeIcon = new transportIcon({
+ iconUrl: './img/green.png'
+ }),
+ busIcon = new transportIcon({
+ iconUrl: './img/red.png'
+ });
+ console.log(data, 43545343)
+ var setData = (a) => {//定义图标
+ marker = L.marker([a.jd, a.wd], {
+ icon: a.state == 0 ? carIcon : a.state == 1 ? planeIcon : a.state == 2 ? busIcon : '',
+ title: title,
+ myData: {//自定义数据
+ ...a
+ }
+ });
+ }
+ for (var i = 0; i < data.length; i++) {
+ var a = data[i];
+ var title = a.title;
+ if (a.state == 0) {
+ setData(a);
+ } else if (a.state == 1) {
+ setData(a);
+ } else if (a.state == 2) {
+ setData(a);
+ }
+ // marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+ map.addLayer(markers);
+
+ markers.on('click', function (a) {
+ var data = JSON.stringify(a.layer.options.myData);
+ layui.use('layer', function () {//弹窗
+ layuiLayer = layui.layer;
+ // layuiLayer.config({
+ // extend: 'myskin/FlareClusterLayer.css'
+ // });
+ // layuiLayer.close(layuiLayer.index);
+
+ layuiLayer.open({
+ title: '',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyTwo',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['250px', '250px'],
+ // area: 'auto',
+ // offset: winSize,
+ offset: 'b',
+ skin: 'flare',
+ isOutAnim: false,
+ closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
+ content: ['./popup/user.html'],
+ resize: false,
+ scrollbar: false,
+ // tipsMore: true, //允许多个tipe
+ // content: num,
+ success: function (layero, index) { //成功后添加全局点击关闭
+ console.log(data, 53413541)
+ $("#layui-layer-iframe" + index).contents().find("#user").val(data);
+ // layuiLayer.close(index)
+ },
+ })
+ })
+ });
+}
\ No newline at end of file
diff --git a/public/xcxh5map/js/def.js b/public/xcxh5map/js/def.js
new file mode 100644
index 0000000..d7ff282
--- /dev/null
+++ b/public/xcxh5map/js/def.js
@@ -0,0 +1,4 @@
+var map = null,
+ getdata = null,
+ marker = null,
+ layuiLayer = null;
\ No newline at end of file
diff --git a/public/xcxh5map/js/getUrlData.js b/public/xcxh5map/js/getUrlData.js
new file mode 100644
index 0000000..093ffa5
--- /dev/null
+++ b/public/xcxh5map/js/getUrlData.js
@@ -0,0 +1,10 @@
+function getQueryVariable(variable)
+{
+ var query = window.location.search.substring(1);
+ var vars = query.split("&");
+ for (var i=0;i<vars.length;i++) {
+ var pair = vars[i].split("=");
+ if(pair[0] == variable){return pair[1];}
+ }
+ return(false);
+}
\ No newline at end of file
diff --git a/public/xcxh5map/js/startMap.js b/public/xcxh5map/js/startMap.js
new file mode 100644
index 0000000..10afa0b
--- /dev/null
+++ b/public/xcxh5map/js/startMap.js
@@ -0,0 +1,7 @@
+window.onload = () => {
+ getdata = JSON.parse(decodeURI(getQueryVariable('data')));
+ beginJuheMap(map, getdata);
+ wx.miniProgram.getEnv(function (res) {
+ console.log(res.miniprogram) // true
+ })
+}
\ No newline at end of file
diff --git a/public/xcxh5map/js/wx.js b/public/xcxh5map/js/wx.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/xcxh5map/js/wx.js
diff --git a/public/xcxh5map/MarkerCluster.Default.css b/public/xcxh5map/lid/MarkerCluster.Default.css
similarity index 100%
rename from public/xcxh5map/MarkerCluster.Default.css
rename to public/xcxh5map/lid/MarkerCluster.Default.css
diff --git a/public/xcxh5map/MarkerCluster.css b/public/xcxh5map/lid/MarkerCluster.css
similarity index 100%
rename from public/xcxh5map/MarkerCluster.css
rename to public/xcxh5map/lid/MarkerCluster.css
diff --git a/public/xcxh5map/leaflet.css b/public/xcxh5map/lid/leaflet.css
similarity index 100%
rename from public/xcxh5map/leaflet.css
rename to public/xcxh5map/lid/leaflet.css
diff --git a/public/xcxh5map/leaflet.js b/public/xcxh5map/lid/leaflet.js
similarity index 100%
rename from public/xcxh5map/leaflet.js
rename to public/xcxh5map/lid/leaflet.js
diff --git a/public/xcxh5map/leaflet.markercluster-src.js b/public/xcxh5map/lid/leaflet.markercluster-src.js
similarity index 100%
rename from public/xcxh5map/leaflet.markercluster-src.js
rename to public/xcxh5map/lid/leaflet.markercluster-src.js
diff --git a/public/xcxh5map/map.html b/public/xcxh5map/map.html
index 671da15..b2c7250 100644
--- a/public/xcxh5map/map.html
+++ b/public/xcxh5map/map.html
@@ -4,97 +4,36 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="./leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <script src="./leaflet.js"></script>
- <script src="./moni.js"></script>
- <link rel="stylesheet" href="./MarkerCluster.css" />
- <link rel="stylesheet" href="./MarkerCluster.Default.css" />
- <script src="./leaflet.markercluster-src.js"></script>
<title>map</title>
- <style type="text/css">
- body {
- padding: 0;
- margin: 0;
- }
-
- html,
- body,
- #map {
- height: 100%;
- width: 100%;
- }
- </style>
+ <!-- leaflet支持 -->
+ <script src="./lid/leaflet.js"></script>
+ <link rel="stylesheet" href="./lid/leaflet.css" />
+ <!-- leaflet聚合支持 -->
+ <link rel="stylesheet" href="./lid/MarkerCluster.css" />
+ <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" />
+ <script src="./lid/leaflet.markercluster-src.js"></script>
+ <!-- layui支持 -->
+ <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all">
+ <script src="../map/lib/layui/layui.js" charset="utf-8"></script>
+ <!-- jqurey -->
+ <script src="../map/lib/jquery.js" charset="utf-8"></script>
+ <!-- 微信支持 -->
+ <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
+ <script src="./js/wx.js"></script>
+ <!-- omyself支持 -->
+ <link rel="stylesheet" href="./css/body.css" />
+ <!-- 获取urlData -->
+ <script src="./js/getUrlData.js"></script>
+ <!-- 初始化地图 -->
+ <script src="./js/createMap.js"></script>
+ <!-- 初始化属性 -->
+ <script src="./js/def.js"></script>
+ <!-- window.onlond -->
+ <script src="./js/startMap.js"></script>
</head>
-
<body>
<div id="map"></div>
- <script type="text/javascript">
- var map = null;
- function beginJuheMap(map) {
- map = L.map('map', { //初始化地图
- center: [31.87, 120.54],
- zoom: 12,
- // crs: L.CRS.EPSG4326, //设置坐标系4326
- attributionControl: false, //去掉右下角
- zoomControl: false, //去掉缩放
- });
- L.tileLayer( //添加切片图层
- "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
- subdomains: ["1", "2", "3", "4"],
- attribution: "高德"
- }
- ).addTo(map);
- var markers = L.markerClusterGroup();
-
- var transportIcon = L.Icon.extend({ //图标初始化
- options: {
- iconSize: [30, 30], // 图标尺寸
- // iconAnchor: [30, 30], // 图标偏移量
- // popupAnchor: [-20, -20] // 弹出框偏移量
- }
- });
- var carIcon = new transportIcon({ //引入图标
- iconUrl: './img/gray.png'
- }),
- planeIcon = new transportIcon({
- iconUrl: './img/green.png'
- }),
- busIcon = new transportIcon({
- iconUrl: './img/red.png'
- });
- console.log(datalist, 43545343)
- for (var i = 0; i < datalist.length; i++) {
- var a = datalist[i];
- var title = a.title;
- if (a.state == 0) {
- var marker = L.marker([a.jd, a.wd], {
- icon: carIcon,
- title: title
- });
- } else if (a.state == 1) {
- var marker = L.marker([a.jd, a.wd], {
- icon: planeIcon,
- title: title
- });
- } else if (a.state == 2) {
- var marker = L.marker([a.jd, a.wd], {
- icon: busIcon,
- title: title
- });
- }
- marker.bindPopup(title);
- markers.addLayer(marker);
- }
- map.addLayer(markers);
-
- markers.on('click', function (a) {
- console.log(a.layer, 11111111111);
- });
- }
- beginJuheMap(map);
-
- </script>
</body>
</html>
\ No newline at end of file
diff --git a/public/xcxh5map/moni.js b/public/xcxh5map/moni.js
deleted file mode 100644
index 7aae03d..0000000
--- a/public/xcxh5map/moni.js
+++ /dev/null
@@ -1,28 +0,0 @@
-var datalist = [{
- jd: 31.87,
- wd: 120.54,
- state: 0,
- size: 300,
- title: '第一个'
- },
- {
- jd: 31.87,
- wd: 120.53,
- state: 1,
- size: 300,
- title: '第二个'
- },
- {
- jd: 31.87,
- wd: 120.52,
- state: 2,
- size: 300,
- title: '第三个'
- }, {
- jd: 31.87,
- wd: 120.58,
- state: 1,
- size: 300,
- title: '第四个'
- },
-];
diff --git a/public/xcxh5map/popup/user.html b/public/xcxh5map/popup/user.html
new file mode 100644
index 0000000..0136125
--- /dev/null
+++ b/public/xcxh5map/popup/user.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>popup</title>
+ <!-- Vue -->
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+</head>
+
+<body>
+ <div id="popup">
+ <!-- 从layui传值给iframe 的占位input -->
+ <input type="text" id="user" ref="user" style="display:none">
+ 46476978---{{ourData}}
+ </div>
+ <script>
+ var me = new Vue({
+ el: '#popup',
+ data: {
+ ourData: '',
+ oldtime: '',
+ },
+ mounted() {
+ this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
+ clearTimeout(this.oldtime);
+ this.ourData = JSON.parse(this.$refs.user.value);//json对象转js对象
+ console.log(this.ourData,2)
+
+ // this.getUser(this.ourData.id);
+ // console.log(this.ourData);
+ // this.getdatas(this.ourData);
+ }, 100);
+ }
+ })
+
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 610c20b..5419a5b 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -118,17 +118,17 @@
isAuth: false
}
},
- {
- path: '/xcxMap',
- name: '地图',
- component: () =>
- import( /* webpackChunkName: "page" */ '@/views/dataL/xcxmap'),
- meta: {
- keepAlive: true,
- isTab: false,
- isAuth: false
- }
- },
+ // {
+ // path: '/xcxMap',
+ // name: '地图',
+ // component: () =>
+ // import( /* webpackChunkName: "page" */ '@/views/dataL/xcxh5map/map.html'),
+ // meta: {
+ // keepAlive: true,
+ // isTab: false,
+ // isAuth: false
+ // }
+ // },
{
path: '*',
redirect: '/404'
--
Gitblit v1.9.3