From 29641ec7b2f2060ba2df3660d6020d05028f721a Mon Sep 17 00:00:00 2001
From: wenc000 <450292408@qq.com>
Date: Sun, 7 Jun 2020 13:13:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9C=B0=E5=9B=BEmarker?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=9F=A5=E7=9C=8B=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/route/check/get-check-item.html    |   6 +-
 .../static/route/check/get-map-location.html  |   5 +-
 .../get-enterprise-location.html              | 108 +++++++++++++++---
 3 files changed, 100 insertions(+), 19 deletions(-)
diff --git a/src/main/resources/static/route/check/get-check-item.html b/src/main/resources/static/route/check/get-check-item.html
index e376ede..1fb0ad7 100644
--- a/src/main/resources/static/route/check/get-check-item.html
+++ b/src/main/resources/static/route/check/get-check-item.html
@@ -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) {
diff --git a/src/main/resources/static/route/check/get-map-location.html b/src/main/resources/static/route/check/get-map-location.html
index c7d6bd0..3ac9fe6 100644
--- a/src/main/resources/static/route/check/get-map-location.html
+++ b/src/main/resources/static/route/check/get-map-location.html
@@ -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';
             });
diff --git a/src/main/resources/static/route/gridpersonnel/get-enterprise-location.html b/src/main/resources/static/route/gridpersonnel/get-enterprise-location.html
index b1c01d2..b435981 100644
--- a/src/main/resources/static/route/gridpersonnel/get-enterprise-location.html
+++ b/src/main/resources/static/route/gridpersonnel/get-enterprise-location.html
@@ -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);
                 }
             }
