New file |
| | |
| | | <!DOCTYPE html> |
| | | |
| | | <head> |
| | | <meta charset="utf-8" /> |
| | | <title>方案布点辅助</title> |
| | | <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script> |
| | | <script type="text/javascript" src="/js/jquery.min.js"></script> |
| | | </head> |
| | | <style type="text/css"> |
| | | body, |
| | | html, |
| | | .main-body, |
| | | #mapCanvas { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | margin: 0; |
| | | padding: 0; |
| | | z-index: 0; |
| | | font-size: 14px; |
| | | font-family: "微软雅黑"; |
| | | } |
| | | |
| | | .popup-box { |
| | | position: absolute; |
| | | z-index: 1; |
| | | background-color: white; |
| | | top: 3%; |
| | | left: 1%; |
| | | padding: 14px 10px 0px; |
| | | text-align: center; |
| | | width: 280px; |
| | | height: 110px; |
| | | } |
| | | |
| | | .search-box { |
| | | width: 220px; |
| | | } |
| | | |
| | | .anchorBL { |
| | | display: none; |
| | | } |
| | | |
| | | .click-handle-title { |
| | | text-align: left; |
| | | } |
| | | |
| | | .marker-total { |
| | | text-align: left; |
| | | padding-left: 2px; |
| | | } |
| | | </style> |
| | | <div class="main-body"> |
| | | <div class="popup-box"> |
| | | <table> |
| | | <tr> |
| | | <td> |
| | | <input class="search-box" type="input" /> |
| | | </td> |
| | | <td> |
| | | <input class="search-btn" type="button" value="搜索" /> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | <table> |
| | | <tr> |
| | | <td> |
| | | <input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" /> |
| | | </td> |
| | | <td class="click-handle-title"> |
| | | 无操作 |
| | | </td> |
| | | <td> |
| | | |
| | | </td> |
| | | <td> |
| | | <input id="clickHandle_3" type="radio" name="mapClickHandle" value="3" /> |
| | | </td> |
| | | <td class="click-handle-title"> |
| | | 删除布点 |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <td> |
| | | <input id="clickHandle_1" type="radio" name="mapClickHandle" value="1" /> |
| | | </td> |
| | | <td class="click-handle-title"> |
| | | [设备]布点 |
| | | </td> |
| | | <td> |
| | | |
| | | </td> |
| | | <td> |
| | | <input id="clickHandle_2" type="radio" name="mapClickHandle" value="2" /> |
| | | </td> |
| | | <td class="click-handle-title"> |
| | | [五角星]布点 |
| | | </td> |
| | | |
| | | </tr> |
| | | <tr> |
| | | <td colspan="2" class="marker-total"> |
| | | [设备]总数: |
| | | <span id="mpointCount">0</span> |
| | | </td> |
| | | <td> |
| | | |
| | | </td> |
| | | <td colspan="2" class="marker-total"> |
| | | [五角星]总数: |
| | | <span id="starCount">0</span> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | | <div id="mapCanvas"></div> |
| | | </div> |
| | | |
| | | <body> |
| | | <script> |
| | | var baiduMap; |
| | | var markerManager = { |
| | | data: {}, |
| | | bind: {} |
| | | }; |
| | | markerManager.bindSelect = function (key, select) { |
| | | this.bind[key] = jQuery(select); |
| | | } |
| | | markerManager.reloadBind = function (key) { |
| | | var select = this.bind[key]; |
| | | if (!!select && !!this.data[key]) { |
| | | select.text(this.data[key].length); |
| | | } else { |
| | | if (!this.data[key]) { |
| | | throw new Error("int markerManager key:" + key + ",don't have data"); |
| | | } else { |
| | | console.log("int markerManager key:" + key + ",don't bind select"); |
| | | } |
| | | } |
| | | } |
| | | markerManager.addMarker = function (key, marker) { |
| | | this.data[key] = !!this.data[key] ? this.data[key] : []; |
| | | this.data[key].push(marker); |
| | | this.reloadBind(key); |
| | | } |
| | | markerManager.addMpoint = function (marker) { |
| | | this.addMarker("mpoint", marker); |
| | | } |
| | | markerManager.addMpoint = function (marker) { |
| | | this.addMarker("star", marker); |
| | | } |
| | | markerManager.removeMarker = function (key, marker) { |
| | | if (!!this.data[key]) { |
| | | var markers = this.data[key]; |
| | | for (var index in markers) { |
| | | var m = markers[index]; |
| | | if (m == marker) { |
| | | markers.splice(index, 1); |
| | | } |
| | | } |
| | | this.reloadBind(key); |
| | | } |
| | | } |
| | | // 0,无操作,1,增加设备,2,增加五角星,3,删除布点 |
| | | function clickHandle(args, key) { |
| | | var handleValue = parseInt($("input[name='mapClickHandle']:checked").val()); |
| | | switch (handleValue) { |
| | | case 0: |
| | | break; |
| | | case 1: |
| | | addMpoint(args.point); |
| | | break; |
| | | case 2: |
| | | addStar(args.point); |
| | | break; |
| | | case 3: |
| | | removeOverlay(key, this); |
| | | break; |
| | | } |
| | | } |
| | | var switchMenuItems = {}; |
| | | switchClickHanld = function (value) { |
| | | value = value.toString(); |
| | | $("input[name='mapClickHandle']").each(function () { |
| | | var handleValue = $(this).val().toString(); |
| | | if (handleValue === value) { |
| | | $("#clickHandle_" + value).prop("checked", true); |
| | | $("#clickHandle_" + value).attr("checked", true); |
| | | // $("#clickHandle_" + value).checked = "checked"; |
| | | } |
| | | }); |
| | | for (var key in switchMenuItems) { |
| | | var menuItem = switchMenuItems[key]; |
| | | if (value == key) { |
| | | menuItem.setIcon("/img/select.png"); |
| | | } else { |
| | | menuItem.setIcon("/img/none.png"); |
| | | } |
| | | } |
| | | } |
| | | |
| | | function clearOverlays() { |
| | | for (var key in markerManager.data) { |
| | | markerManager.data[key] = []; |
| | | markerManager.reloadBind(key); |
| | | } |
| | | baiduMap.clearOverlays(); |
| | | } |
| | | |
| | | function removeOverlay(key, marker) { |
| | | baiduMap.removeOverlay(marker); |
| | | markerManager.removeMarker(key, marker); |
| | | } |
| | | |
| | | function addMarker(point, option) { |
| | | var marker = new BMap.Marker(point, option); |
| | | marker.addEventListener("click", function () { |
| | | var args = Array.prototype.slice.call(arguments); |
| | | clickHandle.call(marker, args, option.key); |
| | | }); |
| | | var baiduMap = this.baiduMap; |
| | | this.baiduMap.addOverlay(marker); |
| | | markerManager.addMarker(option.key, marker); |
| | | //创建右键菜单 |
| | | var markerMenu = new BMap.ContextMenu(); |
| | | markerMenu.addItem(new BMap.MenuItem('删除', function () { |
| | | removeOverlay(option.key, marker); |
| | | })); |
| | | marker.addContextMenu(markerMenu); |
| | | } |
| | | |
| | | function addMpoint(point) { |
| | | var option = { |
| | | enableDragging: true |
| | | }; |
| | | option.icon = new BMap.Icon( |
| | | "/img/mpoint.png", |
| | | new BMap.Size(19, 30) |
| | | ); |
| | | option.key = "mpoint"; |
| | | option.offset = new BMap.Size(0, -15); |
| | | addMarker(point, option); |
| | | } |
| | | |
| | | function addStar(point) { |
| | | var option = { |
| | | enableDragging: true |
| | | }; |
| | | option.icon = new BMap.Icon( |
| | | "/img/star.png", |
| | | new BMap.Size(31, 31) |
| | | ); |
| | | option.key = "star"; |
| | | // option.offset = new BMap.Size(0,-15); |
| | | addMarker(point, option); |
| | | } |
| | | |
| | | function mapInit() { |
| | | var map = new BMap.Map("mapCanvas"); |
| | | this.baiduMap = map; |
| | | map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 |
| | | map.setDefaultCursor('Crosshair'); |
| | | map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 |
| | | map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 |
| | | var menu = new BMap.ContextMenu(); |
| | | |
| | | var txtMenuItem = [{ |
| | | handleType: 0, |
| | | text: '无操作', |
| | | select: true, |
| | | switch: true, |
| | | callback: function () { |
| | | switchClickHanld(0); |
| | | }, |
| | | }, |
| | | { |
| | | handleType: 1, |
| | | text: '[设备]布点', |
| | | switch: true, |
| | | callback: function () { |
| | | switchClickHanld(1); |
| | | } |
| | | }, |
| | | { |
| | | handleType: 2, |
| | | text: '[五角星]布点', |
| | | switch: true, |
| | | callback: function () { |
| | | switchClickHanld(2); |
| | | }, |
| | | }, |
| | | { |
| | | handleType: 3, |
| | | text: '删除布点', |
| | | switch: true, |
| | | callback: function () { |
| | | switchClickHanld(3); |
| | | }, |
| | | }, |
| | | { |
| | | seperator: true |
| | | }, |
| | | { |
| | | text: '关闭搜素框', |
| | | callback: function () { |
| | | var popupBox = $(".popup-box"); |
| | | if (popupBox.css('display') !== "block") { |
| | | popupBox.css('display', "block"); |
| | | this.setText("关闭搜素框"); |
| | | } else { |
| | | popupBox.css('display', "none"); |
| | | this.setText("显示搜素框"); |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | text: '清空地图', |
| | | callback: function (menuItem) { |
| | | var result = confirm('注意! 注意! 注意! 一旦清除后将无法恢复') |
| | | if (result) { |
| | | clearOverlays(); |
| | | } |
| | | } |
| | | } |
| | | ]; |
| | | for (var i = 0; i < txtMenuItem.length; i++) { |
| | | var item = txtMenuItem[i]; |
| | | if (!!item['seperator']) { |
| | | menu.addSeparator(); |
| | | } else { |
| | | if (item.select) { |
| | | item.icon = "/img/select.png"; |
| | | } else { |
| | | item.icon = "/img/none.png"; |
| | | } |
| | | var menuItem = new BMap.MenuItem(item.text, item.callback, { |
| | | width: 120, |
| | | iconUrl: item.icon |
| | | }); |
| | | menu.addItem(menuItem); |
| | | if (item.switch) { |
| | | switchMenuItems[item.handleType] = menuItem; |
| | | } |
| | | } |
| | | } |
| | | map.addContextMenu(menu); |
| | | map.addEventListener( |
| | | "click", |
| | | clickHandle |
| | | ); |
| | | return map; |
| | | } |
| | | (function ($) { |
| | | var map = mapInit(); |
| | | // 搜索点击 |
| | | $('.search-btn').on('click', function (args) { |
| | | var searchValue = $('.search-box').val(); |
| | | if (!!searchValue) { |
| | | baiduMap.centerAndZoom(searchValue); |
| | | } |
| | | }); |
| | | markerManager.bindSelect("mpoint", "#mpointCount"); |
| | | markerManager.bindSelect("star", "#starCount"); |
| | | $("input[name='mapClickHandle']").each(function () { |
| | | var handleValue = $(this).val().toString(); |
| | | $(this).click(function(){ |
| | | switchClickHanld(handleValue); |
| | | }); |
| | | }); |
| | | })($, baiduMap); |
| | | </script> |
| | | </body> |