在Google Maps API中显示多个地图标记

问题描述：

处理.cgi文件中的一些perl代码，该代码循环遍历IP地址的散列列表，然后通过Web服务运行每个IP地址，该服务返回IP地址的经度和纬度，那么它需要将每个IP地址显示为谷歌地图上的标记。截至目前，我已经通过哈希列表并打印每个IP地址的坐标。我无法弄清楚的是如何在谷歌地图上显示多个地图标记。我目前只是通过将值硬编码到$ 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 . ',';

（您可能需要印章（$拉特）;在循环后斩（$ LONS）删除最后一个逗号），然后在您的javascript部分：

// 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 
    }); 
}

答

修复它，让所有的东西都能正常工作。问题在于，$ latitude和$ longitude变量仍然被分配了一堆额外的文本，这些文本是不需要的。现在只分配了这个值。

my $latitude = $result->valueof('//LATITUDE'); 
my $longitude = $result->valueof('//LONGITUDE');

在Google Maps API中显示多个地图标记

相关推荐