最近使用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=false®ion=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].οnmοuseοver=function()
{
this.className+=" sfhover";
}
sfEls[i].οnmοuseοut=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]);
});
}
}
}