[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: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById(gdiv), Options);
}

function setupMarker(item) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(item.XLat, item.YLong),
        icon: item.Ico,
        title: 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);
    return marker;
}

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)
        var mgr = new MarkerManager(map);

    google.maps.event.addListener(mgr, ‘loaded‘, function() {
        mgr.addMarkers(batch, minzoom, maxzoom);
        mgr.refresh();

    });

}

/*
*说明：为Marker标记当点击的时候，弹出提示框
*@marker：需要提示的Marker|new google.maps.Marker
*@contents:提示框内容
*@infowindow:new google.maps.InfoWindow()
*/
function bindInfoWindows(marker, infoType) {

    if (!infoWindow)
        infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, ‘click‘, function() {

        infoWindow.setContent(setupMarkerContens(marker, infoType, false));
        infoWindow.open(map, marker);

    });
}

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>";
    }
}

function findedMarker(guid) {
    var marker;
    $.each(allMarkers, function(index, value) {
        if (value.metadata.guid == guid) {
            marker = value;
            return marker;
        }
    })
    return marker;
}
function GoToNodeClick(guid, infoType, zoom) {

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

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

        if (!infoWindow)
            infoWindow = new google.maps.InfoWindow();

        infoWindow.setContent(setupMarkerContens(marker, infoType, true));
        infoWindow.open(map, marker);
        bindInfoWindows(marker, 0);
    }
}
function SetCenter(lat, lng, zoom) {
    map.setCenter(new google.maps.LatLng(lat, lng));
    map.setZoom(zoom);
}
function UpdateMarker(guid, icon) {
    var marker = findedMarker(guid);
    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>
    <link href="Style/GMapStyle.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=你的KEY&sensor=true"></script>

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

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

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

</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; }希望有所帮助！

[Google Map]使用小计

时间： 2024-10-10 13:31:46

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

[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(

在Google Map中使用地址获取坐标（适用小数据量）

近期手上有个95条数据的地址信息,想把地址转换成经纬度坐标,叠加在底图上.ESRI的online作为专业的云平台,号称提供地理编码服务,可能使用自己的数据制作Web map,于是转成CSV后试了下,结果只有4条记录转换成坐标了,并且都偏离了一个省的范围,基本上不可用.后来想在google earth上试下,使用地址搜索,也不知道是服务器慢,还是什么其他原因,earth的搜索功能简直处于瘫痪状态,打一个地址,10分钟能反应过来,结果基本上是找不到.无奈之下,又试了试google Map,Map上是

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; } } 节省内存开支,减少性能开销,应用启动产生单例对象,永久驻留内

基于HTML5的Geolocation获取地理位置，配合Google Map API反向地址解析（获取用户真实地址）

html 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Geolocation获取地理位置,配合Google Map API

初识SFDC创建一个google map（最基础版本）

google map 目前我只会用js创建,好处是不需要申请google地图钥匙直接就可以用: 有一点必须强调,浏览器必须是IE <apex:page > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://

Android Google Map v2具体解释:开发环境配置

Android Google Map v2具体解释:开发环境配置                                       --转载请注明出处:coder-pig 说在前面: 说到地图定位,如今越来越多的社交app都增加了地图和定位的功能模块,用户非常多的时候 也会用到这些东东,比方,到外面吃饭,次次吃饭前都要拍下照片发到朋友圈,定个位,然后发条说说, 炫耀一下自己今天吃了什么高大上的东东,炫耀和攀比心理我懂,只是,一次下班去吃饭,看到一妹子 吃饭,拍照+发朋友圈,足足用了大概

Android Google Map v2详解之:开发环境配置

Android Google Map v2详解之:开发环境配置                                       --转载请注明出处:coder-pig 说在前面: 说到地图定位,现在越来越多的社交app都加入了地图和定位的功能模块,用户很多的时候 也会用到这些东东,比如,到外面吃饭,次次吃饭前都要拍下照片发到朋友圈,定个位,然后发条说说, 炫耀一下自己今天吃了什么高大上的东东,炫耀和攀比心理我懂,不过,一次下班去吃饭,看到一妹子 吃饭,拍照+发朋友圈,足足用了大概20

房产地图google map的初步应用点滴.3)(转)

房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) google Map的交互基本都是事件驱动的,这表示js是通过生成时间来响应交互的,并且处于监听我们设定的事件,每个 Google Maps API 对象都可导出大量已命名的事件.如果程序想要实现某些事件,则会为这些事件注册 Javascript 事件侦听器,并会在通过在 google.maps.eve