首页 > 代码库 > [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">returnmarker;}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%> </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=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>希望有所帮助!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。