| | |
| | | <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> |
| | | <link rel="stylesheet" type="text/css" href="/css/default.css"> |
| | | <link rel="stylesheet" href="/css/Lobibox.min.css"/> |
| | | <style type="text/css"> |
| | | body, |
| | | html, |
| | |
| | | #mapCanvas { |
| | | width: 100%; |
| | | height: 100%; |
| | | /* overflow: hidden; */ |
| | | /* margin: 0; */ |
| | | /* padding: 0; */ |
| | | overflow: hidden; |
| | | margin: 0; |
| | | padding: 0; |
| | | z-index: 0; |
| | | /* font-size: 14px; */ |
| | | /* font-family: "微软雅黑"; */ |
| | | font-size: 14px; |
| | | font-family: "微软雅黑"; |
| | | } |
| | | |
| | | .popup-box { |
| | | position: absolute; |
| | | z-index: 1; |
| | | font-size: 14px; |
| | | background-color: white; |
| | | top: 3%; |
| | | left: 1%; |
| | | padding: 14px 10px 0px; |
| | | text-align: center; |
| | | width: 290px; |
| | | height: 130px; |
| | | width: 280px; |
| | | height: 150px; |
| | | } |
| | | |
| | | .search-box { |
| | | width: 220px; |
| | | } |
| | | |
| | | .city-box { |
| | | width: 80px; |
| | | } |
| | | .set-city-box { |
| | | display: inline-block; |
| | | position: relative; |
| | | bottom: -2px; |
| | | } |
| | | .anchorBL { |
| | | display: none; |
| | | } |
| | |
| | | text-align: left; |
| | | padding-left: 2px; |
| | | } |
| | | input[type="button"] { |
| | | cursor: pointer; |
| | | } |
| | | input[type="radio"] { |
| | | cursor: pointer; |
| | | } |
| | | </style> |
| | | <body> |
| | | <div class="main-body"> |
| | | <div class="popup-box"> |
| | | <table> |
| | |
| | | </tr> |
| | | </table> |
| | | <table> |
| | | <tr> |
| | | <td colspan="5" class="click-handle-title"> |
| | | 当前城市: |
| | | <span id="city-name" style="width: 60px;height:20px;border-bottom:solid #1b1b1b 1px;display:inline-block"> |
| | | |
| | | </span> |
| | | <div class="set-city-box"><input class="city-box" type="input" /> <a id="setCityBtn" style=" text-decoration:underline; color:#00F;cursor:pointer;">设置</a></div> |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <td> |
| | | <input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" /> |
| | |
| | | </div> |
| | | <div id="mapCanvas"></div> |
| | | </div> |
| | | <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> |
| | | <script type="text/javascript" src="/js/lobibox.min.js"></script> |
| | | |
| | | <body> |
| | | <script> |
| | | var baiduMap; |
| | | var markerManager = { |
| | | data: {}, |
| | | data: { |
| | | mpoint:[], |
| | | star:[], |
| | | _regionName:null, |
| | | _boundary:[], |
| | | _boundaryState:false |
| | | }, |
| | | menuItems:{ |
| | | boundaryMenuItem:null |
| | | }, |
| | | bind: {} |
| | | }; |
| | | markerManager.bindSelect = function (key, select) { |
| | |
| | | console.log("int markerManager key:" + key + ",don't bind select"); |
| | | } |
| | | } |
| | | } |
| | | markerManager.setRegionName = function (regionName,successCallBack,errorCallBack){ |
| | | var thatData = this.data; |
| | | function getBoundary(regionName){ |
| | | var bdary = new BMap.Boundary(); |
| | | var map = baiduMap; |
| | | bdary.get(regionName, function(rs){ //获取行政区域 |
| | | map.clearOverlays(); //清除地图覆盖物 |
| | | var count = rs.boundaries.length; //行政区域的点有多少个 |
| | | if (count === 0) { |
| | | // alert('未能获取当前输入行政区域'); |
| | | if(!!errorCallBack&&errorCallBack instanceof Function){ |
| | | errorCallBack(regionName); |
| | | } |
| | | return ; |
| | | } |
| | | //设置城市名称 |
| | | $('#city-name').html(regionName); |
| | | $('.city-box').val(''); |
| | | map.setCurrentCity(regionName); // 设置地图显示的城市 此项是必须设置的 |
| | | // var pointArray = []; |
| | | var polygonArray = []; |
| | | for (var i = 0; i < count; i++) { |
| | | var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2,fillOpacity:0.01,strokeStyle:"dashed",strokeColor: "#0000ff"}); //建立多边形覆盖物 |
| | | // map.addOverlay(ply); //添加覆盖物 |
| | | // pointArray = pointArray.concat(ply.getPath()); |
| | | polygonArray.push(ply); |
| | | } |
| | | // map.setViewport(pointArray); //调整视野 |
| | | //addlabel(); |
| | | |
| | | markerManager.reloadCustomOverlays(); |
| | | //设置边界缓存之前,先清理原有边界 |
| | | if(markerManager.isBoundaryState()){ |
| | | switchBoundary.apply(markerManager.menuItems.boundaryMenuItem); |
| | | } |
| | | thatData._regionName = regionName; |
| | | markerManager.data._boundary = polygonArray; |
| | | if(!!successCallBack && successCallBack instanceof Function){ |
| | | successCallBack(regionName); |
| | | } |
| | | }); |
| | | } |
| | | getBoundary(regionName); |
| | | } |
| | | markerManager.openBoundary = function(){ |
| | | // console.log(this.data._boundary); |
| | | if(!!this.data._boundary&&this.data._boundary.length>0){ |
| | | for(var n =0 ;n< this.data._boundary.length;n++){ |
| | | baiduMap.addOverlay(this.data._boundary[n]); |
| | | } |
| | | this.data._boundaryState = true; |
| | | } |
| | | } |
| | | markerManager.closeBoundary = function(){ |
| | | for(var n =0 ;n< this.data._boundary.length;n++){ |
| | | baiduMap.removeOverlay(this.data._boundary[n]); |
| | | } |
| | | this.data._boundaryState = false; |
| | | } |
| | | markerManager.isBoundaryState = function() { |
| | | return this.data._boundaryState; |
| | | } |
| | | markerManager.addMarker = function (key, marker) { |
| | | this.data[key] = !!this.data[key] ? this.data[key] : []; |
| | |
| | | // 0,无操作,1,增加设备,2,增加五角星,3,删除布点 |
| | | function clickHandle(args, key) { |
| | | var handleValue = parseInt($("input[name='mapClickHandle']:checked").val()); |
| | | var handleName = ""; |
| | | switch (handleValue) { |
| | | case 0: |
| | | clickHandle.counter +=1; |
| | | handleName += "无操作"; |
| | | break; |
| | | case 1: |
| | | addMpoint(args.point); |
| | | handleName += "[设备]布点"; |
| | | break; |
| | | case 2: |
| | | addStar(args.point); |
| | | handleName += "[五角星]布点"; |
| | | break; |
| | | case 3: |
| | | handleName += "删除布点"; |
| | | if(this instanceof BMap.Marker){ |
| | | removeOverlay(key,this); |
| | | clickHandle.counter -=1; |
| | | }else{ |
| | | clickHandle.counter +=1; |
| | | } |
| | | removeOverlay(key, this); |
| | | break; |
| | | } |
| | | if(clickHandle.counter>=5 ){ |
| | | var msg = "当前状态为:【"+handleName+"】,可以通过【鼠标右键】切换状态" |
| | | Lobibox.notify('info', { |
| | | size: 'mini', |
| | | width: 500, |
| | | // delay: false, |
| | | icon: false, |
| | | msg: msg |
| | | }); |
| | | clickHandle.counter = 0; |
| | | } |
| | | |
| | | } |
| | | clickHandle.counter = 0; |
| | | var switchMenuItems = {}; |
| | | switchClickHanld = function (value) { |
| | | value = value.toString(); |
| | | clickHandle.counter = 0; |
| | | $("input[name='mapClickHandle']").each(function () { |
| | | var handleValue = $(this).val().toString(); |
| | | if (handleValue === value) { |
| | |
| | | } |
| | | } |
| | | } |
| | | markerManager.addOverlaysToBmap = function (overlays) { |
| | | if(!!overlays && overlays instanceof Object){ |
| | | for(var n in overlays){ |
| | | var overlay = overlays[n]; |
| | | baiduMap.addOverlay(overlay); |
| | | } |
| | | }else { |
| | | throw new Error("in addOverlaysToBmap overlays is not list"); |
| | | } |
| | | |
| | | } |
| | | markerManager.reloadCustomOverlays = function() { |
| | | if(!!markerManager.data['mpoint']){ |
| | | markerManager.addOverlaysToBmap(markerManager.data['mpoint']); |
| | | } |
| | | if(!!markerManager.data['star']){ |
| | | markerManager.addOverlaysToBmap(markerManager.data['star']); |
| | | } |
| | | if(markerManager.isBoundaryState()){ |
| | | markerManager.openBoundary(); |
| | | } |
| | | } |
| | | function clearBaiduOverlays() { |
| | | baiduMap.clearOverlays();//先清空百度覆盖物 |
| | | markerManager.reloadCustomOverlays(); |
| | | } |
| | | function clearOverlays() { |
| | | for (var key in markerManager.data) { |
| | | markerManager.data[key] = []; |
| | |
| | | } |
| | | baiduMap.clearOverlays(); |
| | | } |
| | | |
| | | function removeOverlay(key, marker) { |
| | | baiduMap.removeOverlay(marker); |
| | | markerManager.removeMarker(key, marker); |
| | |
| | | // option.offset = new BMap.Size(0,-15); |
| | | addMarker(point, option); |
| | | } |
| | | |
| | | function switchBoundary() { |
| | | if(!markerManager.isBoundaryState()){ |
| | | markerManager.openBoundary(); |
| | | if(markerManager.isBoundaryState()){ |
| | | this.setText("关闭边界"); |
| | | }else { |
| | | alert('请设置当前城市'); |
| | | } |
| | | }else { |
| | | markerManager.closeBoundary(); |
| | | this.setText("打开边界"); |
| | | } |
| | | } |
| | | function mapInit() { |
| | | var map = new BMap.Map("mapCanvas"); |
| | | this.baiduMap = map; |
| | |
| | | } |
| | | }, |
| | | { |
| | | id: 'boundaryMenuItem', |
| | | text: '打开边界', |
| | | callback: function () { |
| | | var that = this; |
| | | switchBoundary.apply(this); |
| | | } |
| | | }, |
| | | { |
| | | text: '清空百度地标', |
| | | callback: function (menuItem) { |
| | | clearBaiduOverlays(); |
| | | } |
| | | }, |
| | | { |
| | | text: '清空地图', |
| | | callback: function (menuItem) { |
| | | var result = confirm('注意! 注意! 注意! 一旦清除后将无法恢复') |
| | |
| | | width: 120, |
| | | iconUrl: item.icon |
| | | }); |
| | | if(item.id == "boundaryMenuItem"){ |
| | | markerManager.menuItems.boundaryMenuItem = menuItem; |
| | | } |
| | | menu.addItem(menuItem); |
| | | if (item.switch) { |
| | | switchMenuItems[item.handleType] = menuItem; |
| | |
| | | "click", |
| | | clickHandle |
| | | ); |
| | | map.addEventListener( |
| | | "dblclick", |
| | | function(){ |
| | | clickHandle.counter -=2; |
| | | } |
| | | ); |
| | | return map; |
| | | } |
| | | (function ($) { |
| | | var map = mapInit(); |
| | | var local = new BMap.LocalSearch(map, { |
| | | renderOptions:{map: map}, |
| | | onMarkersSet:function () { |
| | | markerManager.reloadCustomOverlays(); |
| | | } |
| | | }); |
| | | $('#setCityBtn').click(function () { |
| | | var cityName = $('.city-box').val(); |
| | | if(!!cityName){ |
| | | baiduMap.centerAndZoom(cityName); |
| | | markerManager.setRegionName(cityName,function () { |
| | | },function (value) { |
| | | alert('未找到名为【'+value+'】的城市'); |
| | | }) |
| | | } |
| | | }); |
| | | // 搜索点击 |
| | | $('.search-btn').on('click', function (args) { |
| | | var searchValue = $('.search-box').val(); |
| | | if (!!searchValue) { |
| | | baiduMap.centerAndZoom(searchValue); |
| | | markerManager.setRegionName(searchValue, |
| | | function (searchValue) { |
| | | },function (searchValue) { |
| | | local.search(searchValue); |
| | | }); |
| | | } |
| | | }); |
| | | markerManager.bindSelect("mpoint", "#mpointCount"); |