在Google Maps API中显示多个地图标记 [英] Displaying multiple map markers in Google Maps API

问题描述

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

更新：我已经添加了第一个答案的代码，并成功地在列表外打印列表。我现在遇到的问题是Google地图不会再加载。我已经将问题缩小到了纬度和经度变量分配它的值的javascript。

 除非（$ result->错误）{
 
＃逐个打印结果
 my $ latitude =LATITUDE =。 $ result-> valueof（'// LATITUDE'）。 \\\
; 
 my $ longitude =LONGITUDE =。 $ result-> valueof（'// LONGITUDE'）。 \\\
; 
 
 #printMESSAGE =。 $ result-> valueof（'// MESSAGE'）。 \\\
; 
 
 
 $ lats。= $纬度。 ，; 
 $ lons。= $ longitude。 ，; 
 
 
} else {
 
 printIP2Location Web Service Failed！\\\
; 
 print join'，'，
 $ result-> faultcode，
 $ result-> faultstring，
 $ result-> faultdetail; 
 
} 
} 
 
 chop $ lats; 
砍掉$ lons; 
 
＃打印此处测试变量是否使其不在循环中
 print $ lats; 
 print $ lons; 
 
 print<< ENDHTML; 
< html> 
< head> 
< title> IP查找地图< / 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; 
身高：90％; 
宽度：90％; 
} 
< / style> 
< script type =text / javascript
 src =http://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascript> 
 //如果我注释掉以下变量，地图将会加载，不知道问题是什么，
 var latitudes =$ lats.split（，）; 
 var longitudes =$ lons.split（，）; 
 
 var map; 
函数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）; 
 
 //创建一个标记并将它放置在地图上
 for（var i = 0; i  var latitude = latitudes [i ]。 
 var longitude = longitudes [i]; 
 //创建一个标记并将其放置在地图上
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（latitude，longitude），
 map：map 
}）; 
} 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
  

解决方案

显然你需要保存所有的纬度和经度，而不是仅仅打印它们。除了（$ result）{/ b>

  my $ lats =''之外，我会使用2个全局变量。 
 my $ lons =''; 
 .... 
 $ lats。= $纬度。 ，; 
 $ lons。= $ longitude。 ，; 
  

（您可能需要一个chop（$ lats）; chop（$ lons）最后一个逗号）然后在你的javascript部分：

  //使用split（）从该lats和lons字符串创建两个数组
 var latitudes =$ lats.split（'，'）; 
 var longitudes =$ lons.split（'，'）; 
 ..... 
 //创建地图代码
 .... 
（var i = 0; i  var latitude = latitudes [i]; 
 var longitude = longitudes [i]; 
 //创建一个标记并将其放置在地图上
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（latitude，longitude），
 map：map 
}）; 
} 
  

working on some perl code in a .cgi file that loops through a hash list of IP addresses, then runs each IP address through a web service that returns that latitude and longitude of the IP address, then it needs to display each IP address as a marker on a google map. As of right now I have it running through the hashlist and printing the coordinates of each IP address. What I can't figure out is how to display more than one map marker on the google map. I am currently just testing it by hardcoding values to the $latitude and $longitude variables. I am thinking that there needs to be some sort of loop in the javascript that will run through and assignin each coordinate, but I have no idea on how to approach that.

Update: I have added the code from the first answer and have the list successfully printing outside of the loop. The problem I am having now is that the google map will no longer load. I have narrowed the problem down to the javascript where the latitudes and longitudes variable assigned its value.

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>

解决方案

Obviously you need to save all the latitudes and longitudes, rather than just print them. I'd use 2 globals, outside your unless($result){

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

(You might need a chop($lats); chop($lons) after the loop to remove the last comma) Then in your javascript section:

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

这篇关于在Google Maps API中显示多个地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！