帶有Perl的Javascript Forloop不適用於Google Maps API創建標記

Question

我是perl和javascript的新手，並試圖讓javascript for循環通過perl數組運行以將標記插入到Google Maps實例中。 創建了映射並運行了for循環，但是插入了5個相同的標記，因為循環似乎無法正確運行。 有沒有更好的方法在javascript中訪問此數組？

@latlongarray = (0,0,20,20);
$length = @latlongarray;

{
print <<HTML;
<html>
<head>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?&sensor=true">
    </script>

<script type="text/javascript">
var map ;
  function initialize() {
    var latlng = new google.maps.LatLng(0,0);
    var myOptions = {
     zoom: 2,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP // can be SATELLITE  ,HYBRID,          ROADMAP     or TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
{

var i;
for (i=0;i<=8;i=i+2)
{
var marker = add_marker($latlongarray[i],$latlongarray[i]); 
marker.setMap(map);
    }
    }

 }
  </script>
   <script type="text/javascript">
  function add_marker(lat,lng,title,box_html) {

    var infowindow = new google.maps.InfoWindow({
        content: box_html
});

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      title: title
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});  

  return marker;
 }
</script>

<title>Reverse IP Lookup & Locate</title>
</head>
 <body onload="initialize()">
   <div id="map_canvas" style="width:80%; height:80%"></div>
 </body>
HTML
exit;
}

Answer 1

Perl是服務器端。 它在您的Javascript之前執行。 Perl僅輸出HTML和Javascript，一旦這樣做，HTML和Javascript便不了解您的Perl變量。

您可以在Perl中進行循環，以輸出適當的add_marker() Javascript代碼，也可以輸出Javascript數組，然后像現在一樣使用Javascript循環。 您將永遠無法從Javascript循環中引用Perl的數組索引。

Answer 2

正如Cfreak指出的那樣，您正在混合使用Perl和Javascript代碼。 我最近在這篇文章中回答了一個非常類似的問題

帶有Perl的Javascript Forloop不適用於Google Maps API創建標記

問題描述

2 個解決方案

解決方案1
1 2012-03-20 15:24:05

解決方案2
0 2012-03-20 16:08:39

帶有Perl的Javascript Forloop不適用於Google Maps API創建標記

問題描述

2 個解決方案

解決方案1 1 2012-03-20 15:24:05

解決方案2 0 2012-03-20 16:08:39

解決方案1
1 2012-03-20 15:24:05

解決方案2
0 2012-03-20 16:08:39