最近使用Google地圖和Google提供的API,經過半天的捉摸,終於弄好了。
程式主要實現的功能是將給定的IP地址使用第三方API尋找大體位置(例如<省,城市>),然後根據位置用Google提供的介面找到經緯度,在Google地圖上顯示出來,不多說,直接上代碼,新手,寫得有點亂,見諒!
<head profile=""> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>MyLoadTester</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=falseion=zh-CN"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/service_cloud.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); $( function(){ $("#navsubmenu>a").hover( function(){ var childMenu = $(this).next('ul'); childMenu.show(); } ) } ) //--><!]]></script>
<script type="text/javascript"> var num=<%=appliances.size()%>; var ipList=[]; var lgt=[],lat=[]; <%for(int j=0; j<appliances.size(); j++){%> ipList.push('<%=appliances.get(j)%>'); <%}%> function initialize() { var latlng = new google.maps.LatLng(39.92, 116.46); var myOptions = { zoom:2, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); for(var i=0; i<num ; i++) { userip(ipList[i],i); } function userip(ip,i){ $.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip="+ip, function(){ var prov=remote_ip_info["province"]; var city=remote_ip_info["city"]; var thisAddess=prov+city jsShow(thisAddess,ip,i) } ); } function jsShow(address,ip,i){ var geocoder = new google.maps.Geocoder(); var lg=0,la=0; if(geocoder){ geocoder.geocode({'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var GeoCode = ((results[0].geometry.location).toString().replace(/[()]/g, '')).split(",",2); la = parseFloat(GeoCode[0]); lg = parseFloat(GeoCode[1]); lat[i]=la;lgt[i]=lg; var myLatlng = new google.maps.LatLng(la,lg); var marker = new google.maps.Marker({ position: myLatlng, title: 'Tester Node:'+ ip }); attachSecretMessage(marker, i); markersArray.push(marker); if (markersArray) { for (i in markersArray) { markersArray[i].setMap(map); } } } }) } function attachSecretMessage(marker, number) { var infowindow = new google.maps.InfoWindow( { content: ipList[number], size: new google.maps.Size(50,50) }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); var nodelist_div=document.getElementById("selected_nodes"); nodelist_div.innerHTML+=ipList[number]+'<br><br>'; selectedIP.push(ipList[number]); }); } } }