NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/WaterWellManage/Views/WaterWellMap/Index.cshtml

@{
    ViewBag.Title = "百度地图";
    Layout = "~/Views/Shared/_BaiduMap.cshtml";
}

<style type="text/css">
    .wwtab {
        width: 660px;
        font-size:10pt;
        margin-top: 20px;
        table-layout:fixed; 
        background-color: gray;
    }
	.wwtab td { 
		background-color: white;
        height: 20px;
        width: 120px;
        text-align:left;
        padding: 5px;
        word-break:keep-all;     /* 不换行 */
        white-space:nowrap;      /* 不换行 */
        overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;
	} 
	.wwtab td:nth-child(odd) {  
        background: #d8ebfa;
        width:100px;
    }
    .wwtab a {
        cursor: pointer;
    }
</style>

<div class="main-div">
    <div id='allmap' style='width: 100%; height: 100%; position: absolute;'></div>
    <div id="titleDiv" style="position:absolute; left:0px; top:0px; display:none;font-size:16px"></div>
    <div class="toolbar" style="position: absolute; right: 50px; top: 20px">
        <div style="height: 40px;width:100px;">
            <a id="lr-replace" style=" height: 40px;width:100px; border-radius: 8px; padding: 10px; padding-top: 5px; padding-bottom: 5px; color: white; background-color: #0094ff;cursor: pointer;" class="btn btn-primary" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新地图</a>
        </div>
    </div>
</div>

<script>
    var map = new BMap.Map("allmap");
    var geoc = new BMap.Geocoder();   //地址解析对象
    var point = new BMap.Point("@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[0]", "@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[1]");
    map.centerAndZoom(point, 14); // 中心点
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    $(function () {
        getStationInfo();
        setInterval(getStationInfo, 60000);
    })

    //获取地图信息
    function getStationInfo() {
        map.clearOverlays();
        $.ajax({
            url: "/WaterWellManage/WaterWellMap/GetStationInfo",
            type: "get",
            cache: false,
            dataType: 'json',
            success: function (datas) {
                if (datas.length > 0) {
                    for (var i = 0; i < datas.length; i++) {
                        addMark(datas[i]);
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("与服务器断开连接,请检查服务器是否关闭!");
            }
        });
    }

    // 添加标记
    function addMark(data) {
        // 添加icon标注
        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(11, 25), // 指定定位位置  
            imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移  
        });
        var point = new BMap.Point(data.Lng, data.Lat);
        var marker = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
        // 添加文字标注
        // 获取文字长度
        $("#titleDiv").html(data.WaterWellName);
        var labelWidth = $("#titleDiv").width();
        var opts = {
            position: point,    // 指定文本标注所在的地理位置
            offset: new BMap.Size(-(labelWidth / 2) + 6, -25)    //设置文本偏移量
        }
        var label = new BMap.Label(data.WaterWellName, opts);  // 创建文本标注对象
        label.setStyle({
            color: "red",
            fontSize: "16px",
            fontFamily: "微软雅黑",
            borderWidth: 1,
            borderColor: 'red',
            backgroundColor: 'white',
            width: 200,
            cursor: "pointer"
        });
        marker.setLabel(label);

        // 设置事件
        var str = '<div>'
        str = '<table class="wwtab" border="0" cellspacing="1" cellpadding="0" style="font-size:10pt;"><tbody>'
        str += '<tr>'
        str += '<td class="alt">水源井名称</td><td><a title="' + data.WaterWellName + '">' + data.WaterWellName + '</a></td>'
        str += '<td class="alt">采集时间</td><td><a title="' + (data.GetDateTime == null ? "--" : data.GetDateTime) + '">' + (data.GetDateTime == null ? "--" : data.GetDateTime) + '</a></td>'
        str += '<td class="alt">有功电能</td><td><a title="' + (data.ActiveElectricalEnergy == null ? "--" : data.ActiveElectricalEnergy) + '">' + (data.ActiveElectricalEnergy == null ? "--" : data.ActiveElectricalEnergy) + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">A项电压</td><td><a title="' + (data.VoltageA == null ? "--" : data.VoltageA) + '">' + (data.VoltageA == null ? "--" : data.VoltageA) + '</a></td>'
        str += '<td class="alt">B项电压</td><td><a title="' + (data.VoltageB == null ? "--" : data.VoltageB) + '">' + (data.VoltageB == null ? "--" : data.VoltageB) + '</a></td>'
        str += '<td class="alt">C项电压</td><td><a title="' + (data.VoltageC == null ? "--" : data.VoltageC) + '">' + (data.VoltageC == null ? "--" : data.VoltageC) + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">A项电流</td><td><a title="' + (data.CurrentA == null ? "--" : data.CurrentA) + '">' + (data.CurrentA == null ? "--" : data.CurrentA) + '</a></td>'
        str += '<td class="alt">B项电流</td><td><a title="' + (data.CurrentB == null ? "--" : data.CurrentB) + '">' + (data.CurrentB == null ? "--" : data.CurrentB) + '</a></td>'
        str += '<td class="alt">C项电流</td><td><a title="' + (data.CurrentC == null ? "--" : data.CurrentC) + '">' + (data.CurrentC == null ? "--" : data.CurrentC) + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">净累计流量</td><td><a title="' + (data.NetAccumulatedCurrent == null ? "--" : data.NetAccumulatedCurrent) + '">' + (data.NetAccumulatedCurrent == null ? "--" : data.NetAccumulatedCurrent) + '</a></td>'
        str += '<td class="alt">压力</td><td><a title="' + (data.Pressure == null ? "--" : data.Pressure) + '">' + (data.Pressure == null ? "--" : data.Pressure) + '</a></td>'
        str += '<td class="alt">瞬时流量</td><td><a title="' + (data.InstantaneousFlow == null ? "--" : data.InstantaneousFlow) + '">' + (data.InstantaneousFlow == null ? "--" : data.InstantaneousFlow) + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">浊度</td><td><a title="' + (data.Turbidity == null ? "--" : data.Turbidity) + '">' + (data.Turbidity == null ? "--" : data.Turbidity) + '</a></td>'
        str += '<td class="alt">温度</td><td><a title="' + (data.Temperature == null ? "--" : data.Temperature) + '">' + (data.Temperature == null ? "--" : data.Temperature) + '</a></td>'
        str += '<td class="alt">液位高度</td><td><a title="' + (data.HeightOfLiquidLevel == null ? "--" : data.HeightOfLiquidLevel) + '">' + (data.HeightOfLiquidLevel == null ? "--" : data.HeightOfLiquidLevel) + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">泵频率</td><td><a title="' + (data.Frequency == null ? "--" : data.Frequency) + '">' + (data.Frequency == null ? "--" : data.Frequency) + '</a></td>'
        str += '<td class="alt">泵运行状态</td><td><a>' + (data.RunningState == '0' ? "停止" : data.RunningState == '1' ? '启动' : data.RunningState == '2' ? '故障' : '--') + '</a></td>'
        str += '<td class="alt">泵故障描述</td><td><a title="' + (data.RunningStateDiscription == null ? "--" : data.RunningStateDiscription) + '">' + (data.RunningStateDiscription == null ? "--" : data.RunningStateDiscription) + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">软启动器状态</td><td><a>' + (data.SoftStarterFault == '0' ? "正常" : data.SoftStarterFault == '1' ? '故障' : '--') + '</a></td>'
        str += '<td class="alt">软启动器故障描述</td><td><a title="' + (data.SoftStarterFaultDiscription == null ? "--" : data.SoftStarterFaultDiscription) + '">' + (data.SoftStarterFaultDiscription == null ? "--" : data.SoftStarterFaultDiscription) + '</a></td>'
        str += '<td class="alt">热继电器跳闸状态</td><td><a>' + (data.ThermalRelayTripFault == '0' ? "正常" : data.ThermalRelayTripFault == '1' ? '故障' : '--') + '</a></td>'
        str += '</tr>'
        str += '<tr>'
        str += '<td class="alt">热继电器跳闸故障描述</td><td><a title="' + (data.ThermalRelayTripFaultDiscription == null ? "--" : data.ThermalRelayTripFaultDiscription) + '">' + (data.ThermalRelayTripFaultDiscription == null ? "--" : data.ThermalRelayTripFaultDiscription) + '</a></td>'
        str += '<td class="alt">箱门状态</td><td><a>' + (data.BoxDoorAlarm == '0' ? "开" : data.BoxDoorAlarm == '1' ? '关' : '--') + '</a></td>'
        str += '<td class="alt"></td><td><a></a></td>'
        str += '</tr>'
        str += '</tbody></table>'
        str += '</div>'
        var infoWindow = new BMap.InfoWindow(str, { enableMessage: false });
        marker.addEventListener('click', function () {
            this.openInfoWindow(infoWindow);
        });
    }

</script>