首页 > 代码库 > [Google 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: 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 = http://www.mamicode.com/{ guid: item.Guid, code: item.Code, lampcount: item.LampCount,"kwrd">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=http://www.mamicode.com/‘Images/Illustration.png‘ id=bottomPic>" +        "</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=http://www.mamicode.com/‘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);}

<style type="text/css">.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; }</style>

页面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <title></title>    <link href=http://www.mamicode.com/"Style/GMapStyle.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src=http://www.mamicode.com/"https://maps.googleapis.com/maps/api/js?key=你的KEY&sensor=true"></script>    <script type="text/javascript" src=http://www.mamicode.com/"Scripts/jquery-1.4.1.js" type="text/javascript"></script>    <script type="text/javascript" src=http://www.mamicode.com/"Scripts/markermanager.js" type="text/javascript"></script>    <script type="text/javascript" src=http://www.mamicode.com/"Scripts/GMapOperate.js" type="text/javascript"></script></head><body>    <div id="map">    </div></body></html>
<style type="text/css">.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; }</style>希望有所帮助!