[BaiDu Map]使用小计

最近从谷歌地图转移到百度地图，关于其中操作代码备记下，其中包括关于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);
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

其中页面代码如下：

<!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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }希望有所帮助！

[BaiDu Map]使用小计

时间： 2024-11-02 14:41:08

[BaiDu Map]使用小计的相关文章

[Google Map]使用小计

这里是基于API3基础上,关键代码: var allMarkers = []; var map = null; var mgr = null; var infoWindow; function setupMap(xlat, ylng, zoom, gdiv) { var Options = { zoom: zoom, center: new google.maps.LatLng(xlat, ylng), mapTypeControl: false, //地图卫星控件不显示 mapTypeId:

traits技法小计

在学习算法导论的时候,对于各数据结构,自然是实现一个才算掌握,工具当然是template编程,但是自己的demo经常存在很多问题,比如没有给出迭代器啊,操作符重载不够啊等等设计上的问题,而某些问题实际上是从设计之初就该考虑的大框架,而非小细节.对于C++而言,STL无疑是最佳的参考资料,侯捷先生的STL源码剖析一书给我们良好的示范,而直接从第四章开始看会云里雾里,无法得其精髓,因此在学习算法之余决定尾随侯捷先生脚步,学习STL traits技法,从而可以从STL中学到更多的数据结构实现. 收获自

设计模式小计——23种设计模式1

单例模式Singleton Pattern 确保类只有一个实例,而且自行实例化并向整个系统提供这个实例 public class Singleton{ private static final Singleton singleton = new Singleton(); private Singleton(){} public static Singleton getSingleton(){ return singleton; } } 节省内存开支,减少性能开销,应用启动产生单例对象,永久驻留内

提高Baidu Map聚合的效率

百度的MAP的例子里提供了一个聚合效果,地址是http://developer.baidu.com/map/jsdemo.htm#c1_4 ,效果图如下图: 这个效果很赞,但效率很低,当数据量达到5000的时候就难以忍受了,加载和地图缩放都很卡,用户体验很差劲.官方提供的MarkerClusterer.js 文件是这样的: /** * @fileoverview MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能. * 主入口类是<a href=

汽车仪表是如何计算总计里程和小计里程的？

现在汽车仪表大部分的总计里程和小计里程都是显示在屏幕上的,这包括段码屏.点阵屏.TFT彩屏等,虽然显示形式不一样,但是从业务需求和软件应用层的实现策略来讲,原理应该都是通用的.本文不涉及具体车型,仅对一般的业务逻辑作介绍,一是为了自己总结记录,二是期望吸引同行或爱好者交流. 1.总计里程 ODO(Total Odometer )即总计里程,顾名思义,主要作用是记录汽车总的行驶里程,一般来讲,在用户使用过程中是无法对其修改或清零的,因为它是对二手汽车价值评估的一项重要数值,当然随意篡改这一数据也是

[Baidu Map]添加全景地图

关键代码: /* 为地图添加全景 @map BMap.Map @divid 全景地图承载div @ylng,xlat 全景地图初始化经纬度 eg:panorama = addPanorama(map, 'panorama', ylng, xlat); */ function addPanorama(map, divid, ylng, xlat) { var panorama = new BMap.Panorama(divid); //全景图展示 panorama.setPosition(new

设计模式小计——23种设计模式3

责任链模式Chain of Responsibility 使多个对象都有机会处理请求,从而避免请求的发送者和接受者间的耦合关系,并沿着这条链传递请求,直到有对象处理它为止 责任链模式关键是建立链接关系,在链中决定谁来处理请求 //抽象处理者 public abstract class Handle{ private Handle nextHandle;//链的下一个节点 public final Response handleMessage(Request request){ Response

Android 百度地图开发之一（Hello BaiDu Map）

之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图开发的准备和地图的成功显示即可. 首先建议大家先申请注册一个百度账号. 申请密钥(要想实现百度地图的相关服务必须申请密钥),网址:http://lbsyun.baidu.com/apiconsole/key 需要注意的是:应用名称不要重复或无效,安全码的输入详情请查看:http://develope

baidu map develop

百度地图 前端时间,因项目需要加入了谷歌地图,但是由于谷歌换了接口,对谷歌地图市区耐心了,还是使用国产的百度吧,先走起来. 如果你有百度账号,那就可以搜索百度地图开发者中心,去申请密钥(ak),然后就可以使用了,先来个hello world吧. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&