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

【问题标题】：Displaying multiple map markers in Google Maps API在 Google Maps API 中显示多个地图标记
【发布时间】：2012-03-10 23:32:54
【问题描述】：

在 .cgi 文件中处理一些 perl 代码，该文件循环遍历 IP 地址的哈希列表，然后通过 Web 服务运行每个 IP 地址，该服务返回 IP 地址的纬度和经度，然后它需要显示每个 IP地址作为谷歌地图上的标记。截至目前，我已经通过哈希列表运行它并打印每个 IP 地址的坐标。我想不通的是如何在谷歌地图上显示多个地图标记。我目前只是通过将值硬编码到 $latitude 和 $longitude 变量来测试它。我认为 javascript 中需要有某种循环，它将贯穿并分配每个坐标，但我不知道如何处理。

更新：我添加了第一个答案中的代码，并在循环之外成功打印了列表。我现在遇到的问题是谷歌地图将不再加载。我已将问题缩小到 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>

【问题讨论】：

标签： javascript perl google-maps-api-3

【解决方案1】：

显然，您需要保存所有的纬度和经度，而不仅仅是打印它们。我会使用 2 个全局变量，在你的 unless($result){

之外

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

（您可能需要在循环后添加一个 Chop($lats);chop($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
   });
}

【讨论】：

【解决方案2】：

已修复，现在一切正常。问题是 $latitude 和 $longitude 变量仍然被分配了一堆不需要的额外文本。现在它只是被赋值了。

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

【讨论】：