|  |  |  | 
|---|
|  |  |  | padding: 14px 10px 0px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | width: 280px; | 
|---|
|  |  |  | height: 110px; | 
|---|
|  |  |  | height: 150px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .search-box { | 
|---|
|  |  |  | width: 220px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .city-box { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .set-city-box { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | bottom: -2px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .anchorBL { | 
|---|
|  |  |  | display: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | </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" /> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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] : []; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | (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"); | 
|---|