[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%> </td>" + "<td> </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); }
页面代码：
<!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>希望有所帮助！