新增地图marker点击查看详情
This commit is contained in:
parent
f6d90a5c4f
commit
29641ec7b2
@ -9,6 +9,7 @@
|
||||
<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/style/admin.css" media="all">
|
||||
<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
<style>
|
||||
.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;}
|
||||
@ -19,7 +20,7 @@
|
||||
<body>
|
||||
<div class="layui-anim layui-anim-fadein">
|
||||
<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">
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<div class="layui-input-block" id="checkItemTemplateBox"></div>
|
||||
@ -106,6 +107,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
@ -121,7 +123,6 @@
|
||||
var checkItemArray = [];
|
||||
var wrongCheckItemArray = [];
|
||||
|
||||
|
||||
function closeBox() {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
}
|
||||
@ -139,6 +140,7 @@
|
||||
|
||||
laytpl(document.getElementById("checkItemTemplate").innerHTML).render(data.checkItems, function(html) {
|
||||
document.getElementById("checkItemTemplateBox").innerHTML = html;
|
||||
new Viewer(document.getElementById('app'), {navbar: false});
|
||||
});
|
||||
form.render('radio');
|
||||
}, function(code, data) {
|
||||
|
||||
@ -68,6 +68,7 @@
|
||||
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');
|
||||
@ -90,12 +91,14 @@
|
||||
div.addEventListener('mouseover', function() {
|
||||
this.style.backgroundColor = '#1E9FFF';
|
||||
this.style.cursor = 'pointer';
|
||||
self.text.innerText = '点击查看企业详情';
|
||||
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';
|
||||
});
|
||||
|
||||
@ -51,6 +51,86 @@
|
||||
})
|
||||
});
|
||||
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) {
|
||||
var x = 0.0;
|
||||
@ -69,21 +149,9 @@
|
||||
for(var i = 0, item; item = pointArray[i++];) {
|
||||
// 打点
|
||||
var markPoint = new BMap.Point(item.lng, item.lat);
|
||||
var markerPoint = new BMap.Marker(markPoint);
|
||||
markerPoint.enterpriseId = item.enterpriseId;
|
||||
markerPoint.addEventListener('click', function(e) {
|
||||
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 enterpriseMarker = new EnterpriseMarker(item.enterpriseId, item.enterpriseName, item.photoArray, markPoint);
|
||||
map.addOverlay(enterpriseMarker);
|
||||
// 计算距离
|
||||
var distance = map.getDistance(centerPoint, markPoint);
|
||||
if(distance > maxDistance) {
|
||||
@ -100,6 +168,8 @@
|
||||
if((item.enterpriseLng && item.enterpriseLat) && (item.enterpriseLng > 0 && item.enterpriseLat > 0)) {
|
||||
pointArray.push({
|
||||
enterpriseId: item.enterpriseId,
|
||||
enterpriseName: item.name,
|
||||
photoArray: item.factoryGateByEnterpriseId,
|
||||
lng: item.enterpriseLng,
|
||||
lat: item.enterpriseLat
|
||||
})
|
||||
@ -113,7 +183,13 @@
|
||||
var maxDistance = getMaxDistance(centerPoint, pointArray);
|
||||
// 画圆
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user