·您现在的位置：云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> [BaiduMap]使用小计

[BaiduMap]使用小计

作者：佚名 ASP.NET网站开发编辑：admin 更新时间：2022-07-23

最近从谷歌地图转移到百度地图，关于其中操作代码备记下，其中包括关于MarkerManager使用，代码基于API 2.0：

var allMarkers = [];
var map = null;
var mgr = null;
var infoWindow;
/*
baidumap初始化
*xlat,ylng 经纬度
*zoom 缩放级别
*gdiv 承载div
*/
function setupMap(xlat, ylng, zoom, gdiv) {
    map = new BMap.Map(gdiv);
    var point = new BMap.Point(ylng, xlat);
    map.centerAndZoom(point, zoom);
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
}
/*
创建mark标记
*/
function setupMarker(item) {
    var point = new BMap.Point(item.YLong, item.XLat);
    var icon = new BMap.Icon(item.Ico, new BMap.Size(32, 32));
    var marker = new BMap.Marker(point);
    marker.setIcon(icon);
    marker.disableDragging();
    marker.setTitle(item.Title);
    marker.metadata = { guid: item.Guid, code: item.Code, lampcount: item.LampCount,
        polecount: item.PoleCount, xlat: item.XLat, ylong: item.YLong, type: item.Type,
        lampname: item.LampName, lamppower: item.LampPower, lampupdatetime: item.LampUpdateTime,
        lampstatus: item.LampStatus, cabname: item.CabName, areaname: item.AreaName, roadname: item.RoadName
    };
    bindInfoWindows(marker, marker.metadata.type);
    map.addOverlay(marker);
    return marker;
}

/*
创建集群Mark
*itms json对象
*minzoom 最小缩放级别 MarkerManager使用
*maxzoom 最大缩放级别 MarkerManager使用
*/
function getMarkers(itms, minzoom, maxzoom) {

    var batch = [];
    var jsitms = eval(itms);

    $.each(jsitms, function(index, value) {
        var tmpMark = setupMarker(value);
        batch.push(tmpMark);
        allMarkers.push(tmpMark);
    });


    if (!mgr)
        mgr = new BMapLib.MarkerManager(map, {
            borderPadding: 200,
            maxZoom: 18,
            trackMarkers: true
        });
    mgr.addMarkers(batch, minzoom, maxzoom);
    map.addEventListener("zoomend", function() {
        mgr.show();
    });
    map.addEventListener("dragend", function() {
        mgr.show();
    });
}




/*
*说明：为Marker标记当点击的时候，弹出提示框
*marker：需要提示的Marker
*infoType: 类型
*/
function bindInfoWindows(marker, infoType) {

    if (!infoWindow)
        infoWindow = new BMap.InfoWindow();
    marker.addEventListener("click", function() {

        infoWindow.setContent(setupMarkerContens(marker, infoType, false));
        this.openInfoWindow(infoWindow);
    });
}
/*
为mark标记生成infowindows的内容
*infoType：marker标记类型
*isClick : 是否点击
*/
function setupMarkerContens(marker, infoType, isClick) {

    if (marker.metadata.type == "cab" && isClick == false) {
        return " <table><tr><td align=center style='font-family:微软雅黑;font-size: medium'>灯箱【<span>" + marker.getTitle() + "</span>】运行信息</td> </tr>" +
       " <tr>" +
            "<td valign=top>" +
                "<table width=100%>" +
                    "<tbody>" +
                        "<tr>" +
                            "<td >灯箱编号：</td>" +
                            "<td>" + marker.metadata.code + "</td>" +
                            "<td >灯箱名称：</td>" +
                            "<td>" + marker.getTitle() + " </td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td >所属区域：</td>" +
                            "<td>" + marker.metadata.roadname + " </td>" +
                            "<td >所辖管区：</td>" +
                            "<td>" + marker.metadata.areaname + "</td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td >经度：</td>" +
                            "<td>" + marker.metadata.xlat + "</td>" +
                            "<td>纬度：</td>" +
                            "<td>" + marker.metadata.ylong + "</td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td >控制灯杆：</td>" +
                            "<td>" + marker.metadata.polecount + "</td>" +
                            "<td >控制灯盏：</td>" +
                            "<td> " + marker.metadata.lampcount + "</td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td >故障(不亮灯)：</td>" +
                            "<td>" + window.external.GetLampLight(marker.metadata.guid) + "</td>" +
                            "<td ></td>" +
                            "<td></td>" +
                        "</tr>" +
                    "</tbody>" +
                "</table>" +
            "</td>" +
        "</tr>" +
        "<tr>" +
            "<td>" +
                "<img src='Images/Illustration.png' id=bottomPic></td>" +
        "</tr>" +
    "</table>";
    }
    if (marker.metadata.type == "pole" && isClick == false) {

        return "<table>" +
        "<tr>" +
            "<td align=center style='font-family:微软雅黑;font-size: medium'>灯杆【<span id=poleName>" + marker.metadata.code + "</span>                                】运行信息                            </td>" +
        "</tr>" +
        "<tr>" +
            "<td valign=top>" +
        "<table >" +
                   " <tbody>" +
                        "<tr>" +
                            "<td width=25%>灯杆编号：                                        </td>" +
                            "<td><span id=poleCode>" + marker.metadata.code + "  </span></td>" +
                            "<td  width=25%>灯杆型号：                                        </td>" +
                            "<td><span id=poleType>道路一杆一灯型</span>                                        </td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td  width=25%>所属灯箱：                                        </td>" +
                            "<td><span id=cabName>" + marker.metadata.cabname + "</span>                                        </td>" +
                            "<td width=25%>所属区域：                                        </td>" +
                            "<td><span id=areaName>" + marker.metadata.roadname + "</span>                                        </td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td  width=25%>经度：                                        </td>" +
                            "<td><span id=xlat>" + marker.metadata.xlat + "</span>                                        </td>" +
                            "<td  width=25%>纬度：                                        </td>" +
                            "<td><span id=ylong>" + marker.metadata.ylong + "</span>                                        </td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td  width=25%>灯盏总数：                                        </td>" +
                           " <td><span id=lampCount>" + marker.metadata.lampcount + "</span>                                        </td>" +
                            "<td width=25%>&nbsp;</td>" +
                            "<td>&nbsp;</td>" +
                        "</tr>" +
                    "</tbody>" +
                "</table>" +
            "</td>" +
        "</tr>" +
        "<tr>" +
            "<td  align=center style='font-family:微软雅黑;font-size: medium'>属下灯运行信息                            </td>" +
        "</tr>" +
        "<tr>" +
            "<td align=center valign=top>" +
                "<table id=lampInfoTbl height=50>" +
                    "<tbody>" +
        "<tr>" +
                            "<td  align=center>类别 </td>" +
                            "<td   align=center >名称                                        </td>" +
                            "<td  align=center >额定功率 </td>" +
                            "<td  align=center >当前状态</td>" +
                            "<td  align=center >更新时间                                        </td>" +
                        "</tr>" +
                        "<tr>" +
                            "<td  align=center>道路灯</td>" +
                            "<td  align=center>" + marker.metadata.lampname + "</td>" +
                            "<td  align=center>" + marker.metadata.lamppower + "</td>" +
                            "<td  align=center>" + marker.metadata.lampstatus + "</td>" +
                            "<td  align=center>" + marker.metadata.lampupdatetime + "</td>" +
                        "</tr>" +
                    "</tbody>" +
                "</table>" +
            "</td>" +
        "</tr>" +
        "<tr>" +
            "<td  align=center>" +
                "<img src='Images/Illustration.png' id=bottomPic>" +
            "</td>" +
        "</tr>" +
    "</table>";
    }
    if (infoType == "clcab" && isClick == true) {
        return "<div  style=text-align:center>" + marker.getTitle() + "</div>";
    }
    if (infoType == "clpole" && isClick == true) {
        return "<div  style=text-align:center><b>杆编号:" + marker.metadata.code + "</b><br>"
        + "道路灯:" + marker.metadata.lampstatus + "</div>";
    }
}

/*
根据mark标记 id查找mark标记
*/
function findedMarker(guid) {
    var marker;
    $.each(allMarkers, function(index, value) {
        if (value.metadata.guid == guid) {
            marker = value;
            return marker;
        }
    })
    return marker;
}
/*
树节点点击跳转到对应的mark标记
*guid：marker标记id
*infoType: marker类型
*zoom :缩放级别
*/
function GoToNodeClick(guid, infoType, zoom) {

    var marker = findedMarker(guid);
    if (typeof (marker) != "undefined") {

        var mapZoom = map.getZoom();
        var zoomLevel = zoom > mapZoom ? zoom : mapZoom;
        map.centerAndZoom(marker.getPosition(), zoomLevel);

        if (!infoWindow)
            infoWindow = new BMap.InfoWindow();
        infoWindow.setContent(setupMarkerContens(marker, infoType, true));
        marker.openInfoWindow(infoWindow);
        bindInfoWindows(marker, 0);

    }
}
function SetCenter(lat, lng, zoom) {
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, zoom);
}
function UpdateMarker(guid, icon) {
    var marker = findedMarker(guid);
    var icon = new BMap.Icon(icon, new BMap.Size(32, 32));
    marker.setIcon(icon);
}

其中页面代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>

    <script type="text/javascript" src=http://api.map.baidu.com/api?v=2.0&ak=你的key></script>

    <script type="text/Javascript" src="jquery-1.4.1.js"></script>

    <script type="text/javascript" src="MarkerManager_min.js"></script>

    <script type="text/javascript" src="BMapOperate.js"></script>

    <style type="text/CSS">
        body, html, #map
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>

希望有所帮助！

上一篇文章：轻量级表达式树解析框架Faller
下一篇文章： C#文件读写常用类介绍

[BaiduMap]使用小计

网站建设问答

网站建设开发

网站需求分析