Tenlion/btyjj-inspection
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增地图marker点击查看详情

Browse Source
This commit is contained in:
wenc000 2020-06-07 13:13:33 +08:00
parent f6d90a5c4f
commit 29641ec7b2
3 changed files with 100 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/resources/static/route/check/get-check-item.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/> <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all"> <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
<style> <style>
.check-item-option-number-box {display: inline-block; vertical-align: middle; margin-top: 6px; margin-right: 20px;} .check-item-option-number-box {display: inline-block; vertical-align: middle; margin-top: 6px; margin-right: 20px;}
.check-item-option-text-box {display: inline-block; vertical-align: middle; margin-top: 6px; margin-right: 20px;} .check-item-option-text-box {display: inline-block; vertical-align: middle; margin-top: 6px; margin-right: 20px;}
@ -19,7 +20,7 @@
<body> <body>
<div class="layui-anim layui-anim-fadein"> <div class="layui-anim layui-anim-fadein">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-body" style="padding: 15px;"> <div id="app" class="layui-card-body" style="padding: 15px;">
<form class="layui-form layui-form-pane" lay-filter="dataForm"> <form class="layui-form layui-form-pane" lay-filter="dataForm">
<div class="layui-form-item layui-form-text"> <div class="layui-form-item layui-form-text">
<div class="layui-input-block" id="checkItemTemplateBox"></div> <div class="layui-input-block" id="checkItemTemplateBox"></div>
@ -106,6 +107,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script> <script src="assets/layuiadmin/layui/layui.js"></script>
<script> <script>
layui.config({ layui.config({
@ -121,7 +123,6 @@
var checkItemArray = []; var checkItemArray = [];
var wrongCheckItemArray = []; var wrongCheckItemArray = [];
function closeBox() { function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name)); parent.layer.close(parent.layer.getFrameIndex(window.name));
} }
@ -139,6 +140,7 @@
laytpl(document.getElementById("checkItemTemplate").innerHTML).render(data.checkItems, function(html) { laytpl(document.getElementById("checkItemTemplate").innerHTML).render(data.checkItems, function(html) {
document.getElementById("checkItemTemplateBox").innerHTML = html; document.getElementById("checkItemTemplateBox").innerHTML = html;
new Viewer(document.getElementById('app'), {navbar: false});
}); });
form.render('radio'); form.render('radio');
}, function(code, data) { }, function(code, data) {

5
src/main/resources/static/route/check/get-map-location.html
View File

@ -68,6 +68,7 @@
div.style.lineHeight = '18px'; div.style.lineHeight = '18px';
div.style.fontSize = '12px'; div.style.fontSize = '12px';
div.style.whiteSpace = 'nowrap'; div.style.whiteSpace = 'nowrap';
div.style.border = '1px solid white';
var text = document.createElement('span'); var text = document.createElement('span');
text.appendChild(document.createTextNode(this.enterpriseName)); text.appendChild(document.createTextNode(this.enterpriseName));
text.setAttribute('class', 'text'); text.setAttribute('class', 'text');
@ -90,12 +91,14 @@
div.addEventListener('mouseover', function() { div.addEventListener('mouseover', function() {
this.style.backgroundColor = '#1E9FFF'; this.style.backgroundColor = '#1E9FFF';
this.style.cursor = 'pointer'; this.style.cursor = 'pointer';
self.text.innerText = '点击查看企业详情'; this.style.zIndex = 10000;
self.text.innerText = self.enterpriseName +'，点击查看企业详情';
self.arrow.style.borderTop = '10px solid #1E9FFF'; self.arrow.style.borderTop = '10px solid #1E9FFF';
}); });
div.addEventListener('mouseout', function() { div.addEventListener('mouseout', function() {
this.style.backgroundColor = '#009688'; this.style.backgroundColor = '#009688';
this.style.zIndex = BMap.Overlay.getZIndex(self.point.lat);
self.text.innerText = self.enterpriseName; self.text.innerText = self.enterpriseName;
self.arrow.style.borderTop = '10px solid #009688'; self.arrow.style.borderTop = '10px solid #009688';
}); });

108
src/main/resources/static/route/gridpersonnel/get-enterprise-location.html
View File

@ -51,6 +51,86 @@
}) })
}); });
map.addOverlay(vectorMarker); map.addOverlay(vectorMarker);
function EnterpriseMarker(enterpriseId, enterpriseName, photoArray, point) {
this.enterpriseId = enterpriseId;
this.enterpriseName = enterpriseName;
this.photoArray = photoArray;
this.point = point;
}
EnterpriseMarker.prototype = new BMap.Overlay();
EnterpriseMarker.prototype.initialize = function(map) {
var self = this;
self.map = map;
var div = document.createElement('div');
this.div = div;
div.style.position = 'absolute';
div.style.zIndex = BMap.Overlay.getZIndex(self.point.lat);
div.style.backgroundColor = '#009688';
div.style.color = 'white';
div.style.height = '18px';
div.style.padding = '2px';
div.style.lineHeight = '18px';
div.style.fontSize = '12px';
div.style.whiteSpace = 'nowrap';
div.style.border = '1px solid white';
var text = document.createElement('span');
text.appendChild(document.createTextNode(this.enterpriseName));
text.setAttribute('class', 'text');
self.text = text;
div.appendChild(text);
var arrow = document.createElement('div');
arrow.setAttribute('class', 'arrow')
arrow.style.position = 'absolute';
arrow.style.width = '0';
arrow.style.height = '0';
arrow.style.top = '22px';
arrow.style.left = '0px';
arrow.style.borderLeft = '5px solid transparent';
arrow.style.borderRight = '5px solid transparent';
arrow.style.borderTop = '10px solid #009688';
self.arrow = arrow;
div.appendChild(arrow);
div.addEventListener('mouseover', function() {
this.style.backgroundColor = '#1E9FFF';
this.style.cursor = 'pointer';
this.style.zIndex = 10000;
self.text.innerText = self.enterpriseName +'，点击查看企业详情';
self.arrow.style.borderTop = '10px solid #1E9FFF';
});
div.addEventListener('mouseout', function() {
this.style.backgroundColor = '#009688';
this.style.zIndex = BMap.Overlay.getZIndex(self.point.lat);
self.text.innerText = self.enterpriseName;
self.arrow.style.borderTop = '10px solid #009688';
});
div.addEventListener('click', function() {
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/enterprise/get-enterprise.html?enterpriseId={enterpriseId}', [self.enterpriseId]),
end: function() {}
});
});
map.getPanes().labelPane.appendChild(div);
return div;
}
EnterpriseMarker.prototype.draw = function() {
var map = this.map;
var pixel = map.pointToOverlayPixel(this.point);
this.div.style.left = (pixel.x - 8) +'px';
this.div.style.top = (pixel.y - 34) +'px';
}
// 计算中心点 // 计算中心点
function getCenterPoint(path) { function getCenterPoint(path) {
var x = 0.0; var x = 0.0;
@ -69,21 +149,9 @@
for(var i = 0, item; item = pointArray[i++];) { for(var i = 0, item; item = pointArray[i++];) {
// 打点 // 打点
var markPoint = new BMap.Point(item.lng, item.lat); var markPoint = new BMap.Point(item.lng, item.lat);
var markerPoint = new BMap.Marker(markPoint);
markerPoint.enterpriseId = item.enterpriseId; var enterpriseMarker = new EnterpriseMarker(item.enterpriseId, item.enterpriseName, item.photoArray, markPoint);
markerPoint.addEventListener('click', function(e) { map.addOverlay(enterpriseMarker);
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/enterprise/get-enterprise.html?enterpriseId={enterpriseId}', [this.enterpriseId]),
end: function() {}
});
});
map.addOverlay(markerPoint);
// 计算距离 // 计算距离
var distance = map.getDistance(centerPoint, markPoint); var distance = map.getDistance(centerPoint, markPoint);
if(distance > maxDistance) { if(distance > maxDistance) {
@ -100,6 +168,8 @@
if((item.enterpriseLng && item.enterpriseLat) && (item.enterpriseLng > 0 && item.enterpriseLat > 0)) { if((item.enterpriseLng && item.enterpriseLat) && (item.enterpriseLng > 0 && item.enterpriseLat > 0)) {
pointArray.push({ pointArray.push({
enterpriseId: item.enterpriseId, enterpriseId: item.enterpriseId,
enterpriseName: item.name,
photoArray: item.factoryGateByEnterpriseId,
lng: item.enterpriseLng, lng: item.enterpriseLng,
lat: item.enterpriseLat lat: item.enterpriseLat
}) })
@ -113,7 +183,13 @@
var maxDistance = getMaxDistance(centerPoint, pointArray); var maxDistance = getMaxDistance(centerPoint, pointArray);
// 画圆 // 画圆
if(maxDistance > 0) { if(maxDistance > 0) {
var circle = new BMap.Circle(centerPoint, maxDistance, {strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5}); var circle = new BMap.Circle(centerPoint, maxDistance, {
strokeColor: 'blue',
strokeWeight: 1,
strokeOpacity: 0.5,
fillColor: 'white',
fillOpacity: 0.4
});
map.addOverlay(circle); map.addOverlay(circle);
} }
} }