commit

04.系统编码/App/Content/scripts/beijing/info-point.js

@@ -1,25 +1,55 @@
 var InfoPoint = function (parent) {
     this.Parent = parent;
+    this.Point = null;
     
     this.Startup = function () {
         $('.icon-view .icon-col').on('click', this.OnColClick.bind(this));
         $('#close-info-dialog').on('click', this.HideDialog.bind(this));
-        $('#dialog-info-point-sure').on('click', this.HideDialog.bind(this));
+        $('#dialog-info-point-sure').on('click', this.OnSureClick.bind(this));
         $('#dialog-info-point-cancel').on('click', this.HideDialog.bind(this));
-    }
+    };
 
     this.OnColClick = function (event) {
         $('.icon-view .icon-col').removeClass("active");
 
         var label = $(event.target).is('img') ? $(event.target).parent('div') : $(event.target);
         label.addClass("active");
-    } 
+    };
 
     this.HideDialog = function () {
         $('#dialog-info-point').hide();
-    }
+        $('#map').css('cursor', 'grab');
+        this.Parent.isMark = false;
+    };
 
-    this.ShowDialog = function () {
+    this.ShowDialog = function (point) {
+        this.Point = point;
         $('#dialog-info-point').show();
+        $("#title").textbox('setValue', '')
+    };
+
+    this.OnSureClick = function () {
+        this.validation();
+    }
+
+    this.validation = function () {
+        if ($("#title").textbox('getValue').trim() === '') {
+            alert('请输入标题');
+            return
+        } else {
+            $.ajax({
+                type: "POST",
+                dataType: 'text',
+                url: '/Point/Add',
+                data: {
+                    Title: $("#title").textbox('getValue'),
+                    Icon: $('.icon-view .active').attr('name')
+                },
+                success: function (result) {
+                    this.Parent.AddInfoPoint(this.Point, $("#title").textbox('getValue'), $('.icon-view .active').attr('name'), result);
+                    this.HideDialog();
+                }.bind(this)
+            });
+        }
     }
 }

04.系统编码/App/Content/scripts/beijing/map.js

@@ -71,6 +71,7 @@ var Map = function (parent) {
         this.CreateMap();
         this.InitCapture();
         this.LoadWindTemplate();
+        this.LoadInfoPoint();
         this.InfoPoint.Startup();
 
         $('#mark-button').on('click', this.onMarkClick.bind(this));
@@ -623,15 +624,60 @@ var Map = function (parent) {
             return 'rgb(192, 28, 36)';
     };
 
+    this.LoadInfoPoint = function () {
+        $.ajax({
+            type: "POST",
+            dataType: 'text',
+            url: '/Point/Query',
+            success: function (result) {
+                console.log(result)
+            }.bind(this)
+        });
+    };
+
     this.onMarkClick = function () {
+        this.isMark = true;
+
         $('#map').css('cursor', 'crosshair');
         this.DrewInfoPoint();
     };
 
     this.DrewInfoPoint = function () {
         this.map.on('click', function (e) {
-            console.log(e);
-            //this.InfoPoint.ShowDialog();
-        })
+            if (this.isMark)
+                this.InfoPoint.ShowDialog(e.latlng);
+            else
+                return;
+        }.bind(this))
+    };
+
+    this.AddInfoPoint = function (point, title, icon, id) {
+        let trans = point.lat.toString().replace('.', '');
+        let label = '<div class="info-point-block info-point{0}"><div class="info-point-top"><p>{1}</p><div class="remove-info-point""><span class="remove-info-point-btn" id="close-btn{2}"></span></div></div><div class="icon icon{3}"/></div></div>'.format(trans, title, trans, icon.slice(0, 1));
+        L.marker([point.lat, point.lng], {
+            icon: L.divIcon({
+                className: 'info-point-content',
+                html: label
+            })
+        }).addTo(this.map);
+        
+        var button = $('#close-btn{0}'.format(trans));
+        button.on('click', this.RemoveInfoPoint.bind(this, trans, id));
     };
+
+    this.RemoveInfoPoint = function (trans, id, event) {
+        $('.info-point{0}'.format(trans)).hide();
+
+        $.ajax({
+            type: "POST",
+            dataType: 'text',
+            url: '/Point/Delete',
+            data: {
+                id: id,
+            },
+            success: function (result) {
+                console.log(result)
+            }.bind(this)
+        });
+    }
 };

04.系统编码/App/Content/styles/index.css

@@ -1206,6 +1206,86 @@
     background: #ee5067;
 }
 
+.info-point-content {
+    width: auto !important;
+    height: 60px !important;
+    margin-top: -58px !important;
+    margin-left: 0 !important;
+}
+
+.info-point-content .info-point-block {
+    position: absolute;
+    transform: translateX(-50%);
+}
+
+.info-point-content .info-point-top {
+    padding: 5px 30px 5px 10px;
+    border-radius: 3px;
+    position: relative;
+    cursor:default;
+    border: 1px solid #dddddd;
+    background-color: #ffffff;
+}
+
+.info-point-content .info-point-top p {
+    color: #3a3a3a;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+.info-point-content .info-point-top .remove-info-point {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    z-index: 3000;
+}
+
+.info-point-content .info-point-top .remove-info-point span {
+    width: 10px;
+    height: 10px;
+    display: block;
+    margin: 10px auto 0 auto;
+    cursor: pointer;
+    background: url("../images/close-dialog.png") no-repeat center/cover;
+}
+
+.info-point-content .icon {
+    width: 20px;
+    height: 20px;
+    margin: 0 auto;
+    background: url("../images/markers/1.png") no-repeat center/cover;
+}
+
+.info-point-content .icon2 {
+    background: url("../images/markers/2.png") no-repeat center/cover;
+}
+
+.info-point-content .icon3 {
+    background: url("../images/markers/3.png") no-repeat center/cover;
+}
+
+.info-point-content .icon4 {
+    background: url("../images/markers/4.png") no-repeat center/cover;
+}
+
+.info-point-content .icon5 {
+    background: url("../images/markers/5.png") no-repeat center/cover;
+}
+
+.info-point-content .icon6 {
+    background: url("../images/markers/6.png") no-repeat center/cover;
+}
+
+.info-point-content .icon7 {
+    background: url("../images/markers/7.png") no-repeat center/cover;
+}
+
+.info-point-content .icon8 {
+    background: url("../images/markers/8.png") no-repeat center/cover;
+}
+
 .shrink {
     width: 16px;
     height: 60px;

04.系统编码/App/Views/Beijing/Index.cshtml

@@ -51,28 +51,28 @@
             <input type="text" id="title" class="easyui-textbox" prompt="请输入标题" />
         </div>
         <div class="icon-view clearfix">
-            <div class="icon-col fl">
+            <div class="icon-col active fl" name="1.png">
                 <img src="~/Content/images/markers/1.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="2.png">
                 <img src="~/Content/images/markers/2.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="3.png">
                 <img src="~/Content/images/markers/3.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="4.png">
                 <img src="~/Content/images/markers/4.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="5.png">
                 <img src="~/Content/images/markers/5.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="6.png">
                 <img src="~/Content/images/markers/6.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="7.png">
                 <img src="~/Content/images/markers/7.png" />
             </div>
-            <div class="icon-col fl">
+            <div class="icon-col fl" name="8.png">
                 <img src="~/Content/images/markers/8.png" />
             </div>
         </div>