NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/PipeNetworkManage/Views/PipeMap/MapView.cshtml

@{
    ViewBag.Title = "管网地图";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=@System.Configuration.ConfigurationManager.AppSettings["BaiduMapAK"]"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style type="text/css">
    label {
        max-width:unset;
    }
</style>
<script type="text/javascript">
   
    $(document).ready(function () {
        initBaiduMap("@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[0]", "@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[1]",@System.Configuration.ConfigurationManager.AppSettings["MapZoon"]);
        //地图覆盖物 绘制
        //1、管线绘制
        drawPipeLine(@Html.Raw(ViewBag.PipeLineCoordinates));
        drawMeterPoint(@Html.Raw(ViewBag.MeterCoordinates));
    })

    // 初始化百度地图
    function initBaiduMap(lat, lgt, zoom) {
        map = new BMap.Map("allmap");
        var geoc = new BMap.Geocoder();   //地址解析对象
        var point = new BMap.Point(lat, lgt);
        map.centerAndZoom(point, zoom); // 中心点
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        var bottom_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });// 左上角，添加比例尺
        map.addControl(bottom_left_control);
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
                //BMAP_PERSPECTIVE_MAP
            ],
            anchor: BMAP_ANCHOR_TOP_LEFT
        }));
    }

    function drawPipeLine(datas){        
        for(var i=0;i<datas.length;i++){           
            var Coordinates = datas[i]["Coordinates"];//管线坐标                      
            if (Coordinates.length > 0) {
                var points = Coordinates.split("|");
                var paths = [];
                for (var j = 0 ; j < points.length; j++) {
                    paths.push(new BMap.Point(points[j].split(",")[0], points[j].split(",")[1]));
                }
                var polyLine = new BMap.Polyline(paths, { strokeColor: "#FF0000", strokeWeight: "2", strokeOpacity: 1, strokeStyle: "solid" });
                map.addOverlay(polyLine);
            }
        }
    }

    function drawMeterPoint(datas){
        for(var i=0;i<datas.length;i++){
            var points = datas[i]["LngAndLat"]==null?"":datas[i]["LngAndLat"];
            if(points.length>0){
                var lng = points.split('|')[0];
                var lat = points.split('|')[1];
                var point = new BMap.Point(lng, lat);
                var getDateTime = datas[i]["GetDateTime"];
                var icon = "" ;
                if(contrastTime(getDateTime)>=1){
                    icon ="/Content/images/大圈灰.gif";
                }else{
                    icon ="/Content/images/大圈绿.gif";
                }

                var myIcon = new BMap.Icon(icon, new BMap.Size(15, 15));
                myIcon.setImageSize(new BMap.Size(15, 15))
                // 创建标注对象并添加到地图   
                var marker = new BMap.Marker(point, { icon: myIcon });
                map.addOverlay(marker);
                
                var label = new BMap.Label(datas[i]["MeterAssessmentName"], { "offset": new BMap.Size(20, -10) });
                
                marker.setLabel(label);

                label.setStyle({
                    borderColor: "#000",
                    color: "#000",
                    cursor: "pointer",
                    backgroundColor: "#aed0ea",
                    opacity: 0.7                     
                });
            }
        }
    }   

    function contrastTime(start) {  
        start=Date.parse(start);  //开始时间
       
        var now=Date.parse(new Date());    //结束时间
        var date3=now-start;  //时间差的毫秒数
 
        //计算出相差天数
        return Math.floor(date3/(24*3600*1000)) 

    }  
</script>

<div id='allmap' style='width: 100%; height: 100%;'></div>