百度Map例—风险防范

 

/*解决IE6,7,8 不支持 bind */
if (!Function.prototype.bind) {
    Function.prototype.bind = function (obj) {
        var _self = this
            , args = arguments;
        return function () {
            _self.apply(obj, Array.prototype.slice.call(args, 1));
        }
    }
}

//存放标注点对象的数组-控制显隐
var marker = new Array(); 
var markerTeam = new Array(); 

//存放检索信息窗口对象的数组-控制详细信息展示
var searchInfoWindow = new Array();
var searchInfoWindowTeam = new Array();

var map;
var txtMenuItem;
var removeMarker;

function map_init(e) {
    map = new BMap.Map("allmap"); // 创建Map实例
    var defaultLng = $("#txtDefaultLng").val();
    var defaultLat = $("#txtDefaultLat").val();
    var defaultZoom = $("#txtDefaultZoom").val();

    if (defaultLat == "")
        defaultLat = 23.147267;
    if (defaultLng == "")
        defaultLng = 113.312213;
    if (defaultZoom == "")
        defaultZoom = 13;

    var point = new BMap.Point(defaultLng, defaultLat); //地图中心点，广州市

    map.centerAndZoom(point, defaultZoom); // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom(true); //启用滚轮放大缩小

    //添加点击事件
    map.addEventListener("click", function (e) {
        //如风险范围圈在编辑中，则取消编辑
        if (circle.editState) {
            circle.endEdit();
        }
    });
    //添加右键事件-同时获取坐标
    map.addEventListener("rightclick", function (e) {
        rightclickPoint = { lng: e.point.lng, lat: e.point.lat };
    });

    //添加地图右键菜单
    var menu = new BMap.ContextMenu();
    txtMenuItem = [
        {
            text: '设置风险范围',
            callback: function () {
                circle.addInit();
                var circleTemp = new BMap.Circle(new BMap.Point(rightclickPoint.lng, rightclickPoint.lat), circle.dfRadius, { strokeColor: "red", fillColor: "#FFB5B5", strokeWeight: 5, strokeOpacity: 0.5 }); //创建圆
                map.addOverlay(circleTemp);
                circle.add(circleTemp);
            }
        }
    ];
    for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback));
    }
    map.addContextMenu(menu);

    //删除标注
    removeMarker = function (e, ee, marker) {
        map.removeOverlay(marker);
    }

    /*加载应急队伍数据*/
    InitEmergencyTeam(txtMenuItem, removeMarker);
    /*加载风险源数据*/
    InitRiskSources(txtMenuItem, removeMarker);

    var local = new BMap.LocalSearch(map, {
        renderOptions: { map: map, panel: "r-result" }
    });
    //local.search(e);
}
/*加载应急队伍数据*/
function InitEmergencyTeam(txtMenuItem, removeMarker) {
    var pointTeam = new Array(); //存放标注点经纬信息的数组
    var infoTeam = new Array(); //存放提示信息窗口对象的数组
    if (markerArrTeam == null) return;
    for (var i = 0; i < markerArrTeam.length; i++) {
        if (markerArrTeam[i].Longitude == null || markerArrTeam[i].Latitude == null) {
            continue;
        }

        if (i > 400) {
            break;
        }

        pointTeam[i] = new window.BMap.Point(markerArrTeam[i].Longitude, markerArrTeam[i].Latitude); //循环生成新的地图点
        var iconImg = new BMap.Icon("/ERMS/Images/yjdw.png", new BMap.Size(17, 22));
        markerTeam[i] = new window.BMap.Marker(pointTeam[i], { icon: iconImg }); //按照地图点坐标生成标记
        map.addOverlay(markerTeam[i]);

        //添加标注右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem(txtMenuItem[0].text, txtMenuItem[0].callback));
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));
        markerTeam[i].addContextMenu(markerMenu);

        var markerName = markerArrTeam[i].TeamName + (markerArrTeam[i].UnitName == null ? "" : "[" + markerArrTeam[i].UnitName + "]");
        // 创建信息窗口对象
        infoTeam[i] = "<div class='boardInfo'><p class='boardp1'>" + "负责人：" + (markerArrTeam[i].Person == null ? "" : markerArrTeam[i].Person) + "&emsp;电话：" + (markerArrTeam[i].Tel == null ? "" : markerArrTeam[i].Tel) + "<br>性质：" + (markerArrTeam[i].NatureName == null ? "" : markerArrTeam[i].NatureName) + "&emsp;队伍驻地：" + (markerArrTeam[i].TeamBase == null ? "" : markerArrTeam[i].TeamBase) + "<br>擅长处理事件：" + markerArrTeam[i].GoodEvents + "<br>备注：" + markerArrTeam[i].Reamrk + "</p></div>";
        //创建百度样式检索信息窗口对象                       
        searchInfoWindowTeam[i] = new BMapLib.SearchInfoWindow(map, infoTeam[i], {
            title: markerName,      //标题
            width: 325,             //宽度
            height: 95,              //高度
            panel: "panel",         //检索结果面板
            enableAutoPan: true,     //自动平移
            searchTypes: [
                BMAPLIB_TAB_SEARCH,   //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        //添加点击事件
        markerTeam[i].addEventListener("click",
            (function (k) {
                return function () {
                    searchInfoWindowTeam[k].open(markerTeam[k]);
                }
            })(i)
        );
    }
}

var pointRisk = new Array(); //存放标注点经纬信息的数组
var infoRisk = new Array(); //存放提示信息窗口对象的数组

/*加载风险源数据*/
function InitRiskSources(txtMenuItem, removeMarker) {
    if (markerArr == null) return;
    for (var i = 0; i < markerArr.length; i++) {
        if (markerArr[i].Longitude == null || markerArr[i].Latitude==null)
        {
            continue;
        }

        if (i > 500)
        {
            break;
        }

        pointRisk[i] = new window.BMap.Point(markerArr[i].Longitude, markerArr[i].Latitude); //循环生成新的地图点
        var iconImg = new BMap.Icon(getIco(markerArr[i].RaskFlag), new BMap.Size(20, 30));
        marker[i] = new window.BMap.Marker(pointRisk[i], { icon: iconImg }); //按照地图点坐标生成标记
        map.addOverlay(marker[i]);

        //添加标注右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem(txtMenuItem[0].text, txtMenuItem[0].callback));
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));
        marker[i].addContextMenu(markerMenu);
      
        // 创建信息窗口对象
        infoRisk[i] = "<div class='boardInfo'><div style='margin-top:10px;'><input id='Button1' type='button' value='企业备案信息' class='btngreen' onclick=\"edit('" + markerArr[i].UnitID + "','" + markerArr[i].TaskID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='备案附件' class='btngreen' onclick=\"unitsFile('" + markerArr[i].UnitID + "')\" />&nbsp;&nbsp;&nbsp;&nbsp;</div><div style='margin-top:10px;'><input id='Button1' type='button' value='应急物资' class='btngreen' onclick=\"unitsGoods('" + markerArr[i].UnitID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='救援队伍' class='btngreen' onclick=\"unitsTeam('" + markerArr[i].UnitID + "')\"/></div><div style='margin-top:10px;'><input id='Button1' type='button' value='尾矿备案信息' class='btngreen' onclick=\"unitsTeam('" + markerArr[i].UnitID + "','" + markerArr[i].TaskID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='企业排查管理' class='btngreen' onclick=\"unitsScreen('" + markerArr[i].UnitID + "')\"/></div></div>";
        //创建百度样式检索信息窗口对象
        searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, infoRisk[i], {
            title: markerArr[i].UnitName,      //标题
            width: 320,             //宽度
            height: 120,              //高度
            panel: "panel",         //检索结果面板
            enableAutoPan: true,     //自动平移
            searchTypes: [
            ]
        });
        //添加点击事件
        marker[i].addEventListener("click",
            (function (k) {
                return function () {
                    searchInfoWindow[k].open(marker[k]);
                }
            })(i)
        );
    }
}

//异步调用百度js
function map_load() {
    var load = document.createElement("script");
    load.src = "http://api.map.baidu.com/api?v=2.0&ak=bHfVazUYMm8g69AtQCTHkStq&callback=map_init";
    document.body.appendChild(load);
}

//键盘回车事件
function EnterPress() {
    $("#sKey").on("keydown", function (event) {
        if (event.keyCode == 13) {
            searchUnits($(this).val());
            return false;
        }
    })
}

//企业坐标获取焦点
function theUnitLocation(index) {

    var i = index;

    if (searchInfoWindow[index] == null)
    {
        pointRisk[i] = new window.BMap.Point(markerArr[i].Longitude, markerArr[i].Latitude); //循环生成新的地图点
        var iconImg = new BMap.Icon(getIco(markerArr[i].RaskFlag), new BMap.Size(20, 30));
        marker[i] = new window.BMap.Marker(pointRisk[i], { icon: iconImg }); //按照地图点坐标生成标记
        map.addOverlay(marker[i]);

        //添加标注右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem(txtMenuItem[0].text, txtMenuItem[0].callback));
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));
        marker[i].addContextMenu(markerMenu);

        // 创建信息窗口对象
        infoRisk[i] = "<div class='boardInfo'><div style='margin-top:10px;'><input id='Button1' type='button' value='企业备案信息' class='btngreen' onclick=\"edit('" + markerArr[i].UnitID + "','" + markerArr[i].TaskID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='备案附件' class='btngreen' onclick=\"unitsFile('" + markerArr[i].UnitID + "')\" />&nbsp;&nbsp;&nbsp;&nbsp;</div><div style='margin-top:10px;'><input id='Button1' type='button' value='应急物资' class='btngreen' onclick=\"unitsGoods('" + markerArr[i].UnitID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='救援队伍' class='btngreen' onclick=\"unitsTeam('" + markerArr[i].UnitID + "')\"/></div><div style='margin-top:10px;'><input id='Button1' type='button' value='尾矿备案信息' class='btngreen' onclick=\"unitsTeam('" + markerArr[i].UnitID + "','" + markerArr[i].TaskID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='企业排查管理' class='btngreen' onclick=\"unitsScreen('" + markerArr[i].UnitID + "')\"/></div></div>";
        //创建百度样式检索信息窗口对象
        searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, infoRisk[i], {
            title: markerArr[i].UnitName,      //标题
            width: 320,             //宽度
            height: 120,              //高度
            panel: "panel",         //检索结果面板
            enableAutoPan: true,     //自动平移
            searchTypes: [
            ]
        });
        //添加点击事件
        marker[i].addEventListener("click",
            (function (k) {
                return function () {
                    searchInfoWindow[k].open(marker[k]);
                }
            })(i)
        );
    }

    searchInfoWindow[index].open(marker[index]);

}

function BatchAddPoint(index) {

    var i = index;

    if (searchInfoWindow[index] == null) {
        pointRisk[i] = new window.BMap.Point(markerArr[i].Longitude, markerArr[i].Latitude); //循环生成新的地图点
        var iconImg = new BMap.Icon(getIco(markerArr[i].RaskFlag), new BMap.Size(20, 30));
        marker[i] = new window.BMap.Marker(pointRisk[i], { icon: iconImg }); //按照地图点坐标生成标记
        map.addOverlay(marker[i]);

        //添加标注右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem(txtMenuItem[0].text, txtMenuItem[0].callback));
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(marker)));
        marker[i].addContextMenu(markerMenu);

        // 创建信息窗口对象
        infoRisk[i] = "<div class='boardInfo'><div style='margin-top:10px;'><input id='Button1' type='button' value='企业备案信息' class='btngreen' onclick=\"edit('" + markerArr[i].UnitID + "','" + markerArr[i].TaskID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='备案附件' class='btngreen' onclick=\"unitsFile('" + markerArr[i].UnitID + "')\" />&nbsp;&nbsp;&nbsp;&nbsp;</div><div style='margin-top:10px;'><input id='Button1' type='button' value='应急物资' class='btngreen' onclick=\"unitsGoods('" + markerArr[i].UnitID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='救援队伍' class='btngreen' onclick=\"unitsTeam('" + markerArr[i].UnitID + "')\"/></div><div style='margin-top:10px;'><input id='Button1' type='button' value='尾矿备案信息' class='btngreen' onclick=\"unitsTeam('" + markerArr[i].UnitID + "','" + markerArr[i].TaskID + "')\"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id='Button1' type='button' value='企业排查管理' class='btngreen' onclick=\"unitsScreen('" + markerArr[i].UnitID + "')\"/></div></div>";
        //创建百度样式检索信息窗口对象
        searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, infoRisk[i], {
            title: markerArr[i].UnitName,      //标题
            width: 320,             //宽度
            height: 120,              //高度
            panel: "panel",         //检索结果面板
            enableAutoPan: true,     //自动平移
            searchTypes: [
            ]
        });
        //添加点击事件
        marker[i].addEventListener("click",
            (function (k) {
                return function () {
                    searchInfoWindow[k].open(marker[k]);
                }
            })(i)
        );
    }
}

//风险范围圈
var circle = {
    data: [],
    dfRadius: 5000,
    editState: false,
    ToolEditJudge: function () {
        if (this.data.length > 0) {
            this.setShowVal(this.data[this.data.length - 1].getRadius());
            $("#circleTool").show();
            this.startEdit();
        }
        else {
            this.setShowVal(this.dfRadius);
            $("#circleTool").hide();
        }
    },
    initState: function () {
        $("#btnCircleStart").hide();
        $("#btnCircleEnd").show();
    },
    addInit: function () {
        if (!$("#btnCircleEnd").is(":hidden"))
            this.endEdit();
    },
    add: function (circleTemp) {
        this.data.push(circleTemp);
        this.ToolEditJudge();
        for (var i = 0; i < markerArr.length; i++) {
            BatchAddPoint(i);
        }
    },
    startEdit: function () {
        this.data[this.data.length - 1].enableEditing();
        this.editState = true;
        //圆形覆盖物的属性发生变化时触发此事件。
        this.data[this.data.length - 1].addEventListener("lineupdate", this.lineupdateEvent);
        this.initState();
    },
    endEdit: function () {
        this.data[this.data.length - 1].disableEditing();
        this.editState = false;
        $("#btnCircleStart").show();
        $("#btnCircleEnd").hide();
        fxyUnits(this.data[this.data.length - 1].getCenter());
    },
    removeLast: function () {
        if (this.data.length > 0) {
            map.removeOverlay(this.data[this.data.length - 1]);
            this.data.pop();
            this.ToolEditJudge();
        }
    },
    lineupdateEvent: function (type, target) {
        circle.setShowVal(this.getRadius());
    },
    setShowVal: function (val) {
        if (!isNaN(val)) {
            var txt = val.toFixed(1);
            $("#btnCircleRadius").val(txt + "m");
        }
    }
}

//加载右侧菜单
function Side() {
    $("#Side_layer").hover(function () {
        $("#SideContent").stop().animate({ width: "show", opacity: "show" }, "normal", function () {
            $("#SideContent").show();
        });
        return false;
    },
    function () {
        $("#SideContent").stop().animate({ width: "hide", opacity: "hide" }, "normal", function () {
            $("#SideContent").hide();
        });
        return false;
    });
}
//加载查询企业信息
function searchUnits(key) {
    var temp = "";
    var sRiver = $('#sRiver').val();
    var sArea = $('#sArea').val();
    var sPark = $('#sPark').val();
    var syb = document.getElementById("cbxyb").checked; //false  true
    var sjd = document.getElementById("cbxjd").checked;
    var szd = document.getElementById("cbxzd").checked;
    if (markerArr == null) return;
    for (var i = 0; i < markerArr.length; i++) {
        if (key != "" && markerArr[i].UnitName.indexOf(key) < 0) {
            continue;
        }
        else if (sRiver != "" && markerArr[i].RiverName.indexOf(sRiver) < 0) {
            continue;
        } else if (sArea != "" && markerArr[i].AreaName.indexOf(sArea) < 0) {
            continue;
        } else if (sPark != "" && markerArr[i].ParkName.indexOf(sPark) < 0) {
            continue;
        } else if (syb || sjd || szd) {
            if (sjd && !szd && syb) {
                if (markerArr[i].RaskFlag == "3") {
                    continue;
                }
            } else if (!sjd && szd && syb) {
                if (markerArr[i].RaskFlag == "2") {
                    continue;
                }
            } else if (sjd && szd && !syb) {
                if (markerArr[i].RaskFlag == "1") {
                    continue;
                }
            } else {
                if (syb && sjd && szd) {

                } else {
                    if (syb) {
                        if (markerArr[i].RaskFlag != "1") {
                            continue;
                        }
                    } else if (sjd) {
                        if (markerArr[i].RaskFlag != "2") {
                            continue;
                        }
                    } else {
                        if (markerArr[i].RaskFlag != "3") {
                            continue;
                        }
                    }
                }
            }
        }
        temp += '<li onclick="theUnitLocation(' + i + ')" >';
        temp += '<div class="cl_div"><img src="' + getIco(markerArr[i].RaskFlag) + '"/></div>';
        temp += '<div class="cr_div">';
        temp += '<div class="unitName_div">' + markerArr[i].UnitName + '</div>'
        temp += '<div class="lxr_div"><span>联系人:</span><span>' + markerArr[i].linkman + '</span>&emsp;<span>电话：</span><span>' + markerArr[i].Tel + '</span></div>'
        if (markerArr[i].Address != null && markerArr[i].Address != "")
            temp += '<div><span>地&nbsp;&nbsp;址：</span><span>' + markerArr[i].Address + '</span></div>'
        temp += '</div><div class="clear"></div></li>'
    }
    $("#unitLi").html(temp);
}
//加载风险范围圈内的企业
function fxyUnits(pointA) {
    var tRange = $("#btnCircleRadius").val().replace("m", "");
    if (isNaN(tRange))
        return;

    var temp = "";
    for (var i = 0; i < markerArr.length; i++) {
        var pointB = new BMap.Point(markerArr[i].Longitude, markerArr[i].Latitude);

        var distance = map.getDistance(pointA, pointB);
        if (distance <= tRange) {
            temp += '<tr>';
            temp += '<td class="entTd" onclick="theUnitLocation(' + i + ')"><span class="sIco"><img src="' + getIco(markerArr[i].RaskFlag) + '"/></span>' + markerArr[i].UnitName + '<span class="cspan">' + distance.toFixed(1) + 'm</span></td>';
            temp += '<td>' + getRang(markerArr[i].RaskFlag) + '</td>';
            temp += '<td>' + markerArr[i].linkman + '</td>';
            temp += '<td>' + markerArr[i].Tel + '</td>';
            temp += '</tr>';
        }
    }

    $("#fxyDatatable tbody").html(temp);
    if (temp != "")
        $("#fxyDiv").fadeIn();
    else
        $("#fxyDiv").fadeOut();
}

function getIco(val) {
    switch (val) {
        case "1": return "/Images/MapImg/mark1.png";
        case "2": return "/Images/MapImg/mark2.png";
        case "3": return "/Images/MapImg/mark3.png";
        default: return "";
    }
}
function getRang(val) {
    switch (val) {
        case "1": return "一般环境风险";
        case "2": return "较大环境风险";
        case "3": return "重大环境风险";
        default: return "";
    }
}

/** 控制标注点显示隐藏 **/
var SH = {
    EntControl: function (ik, obj) {
        if ($(obj).hasClass("cl")) {
            this.EntShowHide(false, marker, ik);
            $(obj).removeClass("cl");
        } else {
            this.EntShowHide(true, marker, ik);
            $(obj).addClass("cl");
        }
    },
    TeamControl: function (obj) {
        if ($(obj).hasClass("cl")) {
            this.TeamShowHide(false, markerTeam);
            $(obj).removeClass("cl");
        } else {
            this.TeamShowHide(true, markerTeam);
            $(obj).addClass("cl");
        }
    },
    EntShowHide: function (bl, markerItem, ik) {
        for (var i = 0; i < markerArr.length; i++) {
            if (markerArr[i].RaskFlag == ik) {
                if (bl)
                    markerItem[i].show();
                else
                    markerItem[i].hide();
            }
        }
    },
    TeamShowHide: function (bl, markerItem) {
        for (var i = 0; i < markerItem.length; i++) {
            if (bl)
                markerItem[i].show();
            else
                markerItem[i].hide();
        }
    }
}

$(function () {
    var wh = $(window).height();
    $("#allmap").height(wh - 7)
    $("#allmap").width($(window).width())
    $("#SideContent").height(wh - 100);
    map_load();
    //$("#SideContent").show();
    Side();
    searchUnits("");
    EnterPress();
})