2012-03-10 2 views
1

IPアドレスのハッシュリストをループする.cgiファイルの一部のperlコードを処理し、IPアドレスの緯度と経度を返すWebサービスを通じて各IPアドレスを実行します、各IPアドレスをマーカーとしてGoogleマップに表示する必要があります。現在のところ、私はハッシュリストを実行して各IPアドレスの座標を表示しています。私が理解できないことは、Googleマップ上に複数の地図マーカーを表示する方法です。私は現在、値を$ latitudeと$ longitude変数にハードコーディングすることでテストしています。私はそこを実行し、各座標を割り当てるjavascriptのループのいくつかの並べ替えが必要があると思っているが、私はそれにアプローチする方法については考えていない。複数のマップマーカーをGoogle Maps APIに表示

更新:最初の回答からコードを追加し、ループの外でリストを正常に印刷できました。私が今抱えている問題は、Googleマップがもはや読み込まれないということです。私は緯度と経度の変数がその値を割り当てたjavascriptに問題を絞り込んだ。

unless ($result->fault) { 

# Print out the results one by one 
my $latitude = "LATITUDE = " . $result->valueof('//LATITUDE') . "\n"; 
my $longitude = "LONGITUDE = " . $result->valueof('//LONGITUDE') . "\n"; 

#print "MESSAGE = " . $result->valueof('//MESSAGE') . "\n"; 


$lats .= $latitude . ','; 
$lons .= $longitude . ','; 


} else { 

print "IP2Location Web Service Failed!\n"; 
print join ', ', 
$result->faultcode, 
$result->faultstring, 
$result->faultdetail; 

} 
} 

chop $lats; 
chop $lons; 

#printing here to test if the variable is making it out of the loop 
print $lats ; 
print $lons ; 

print <<ENDHTML; 
<html> 
    <head> 
<title>IP Lookup Map</title> 
<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, user-scalable=no"> 
<meta charset="UTF-8"> 
<style type="text/css"> 
    html, body, #map_canvas { 
    margin: 0; 
    padding: 0; 
    height: 90%; 
    width: 90%; 
    } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
//If I comment out the following variables the map will load, not sure what the problem is 
    var latitudes = "$lats".split(","); 
    var longitudes = "$lons".split(","); 

    var map; 
    function initialize() { 
    var myOptions = { 
     zoom: 7, 
     center: new google.maps.LatLng(44, -90), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     myOptions); 

    // Creating a marker and positioning it on the map 
    for(var i = 0; i < latitudes.length; i++){ 
     var latitude = latitudes[i]; 
     var longitude = longitudes[i]; 
    // Creating a marker and positioning it on the map 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(latitude,longitude), 
     map: map 
    }); 
    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

答えて

2

明示的に印刷するのではなく、すべての緯度と経度を保存する必要があります。あなたに続いて、私は{

my $lats = ''; 
my $lons = ''; 
.... 
$lats .= $latitude . ','; 
$lons .= $longitude . ','; 

(最後のカンマを削除するにはループの後に($ロンを)チョップあなたがチョップ($ラッツ)が必要になる場合があります)あなたの場合を除き($結果)の外に、2つのグローバルを使用したいですjavacriptのセクション:

// create two arrays from that lats and lons string using split() 
var latitudes = "$lats".split(','); 
var longitudes = "$lons".split(','); 
..... 
// create map code 
.... 
for(var i = 0; i < latitudes.lenght; i++){ 
    var latitude = latitudes[i]; 
    var longitude = longitudes[i]; 
    // Creating a marker and positioning it on the map 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(latitude,longitude), 
     map: map 
    }); 
} 
0

修正され、すべてが動作しています。問題は、$ latitude変数と$ longitude変数がまだ不要な余分なテキストを割り当てられているところでした。これで値が割り当てられました。

my $latitude = $result->valueof('//LATITUDE'); 
my $longitude = $result->valueof('//LONGITUDE'); 
関連する問題