在Google Maps API中，如何在多個信息窗口中插入多個標記？

我正在使用Google Maps API v3。我有一個地圖佔用整個頁面上的自定義標記。我希望每個標記點擊時打開一個信息窗口，其中包含指向與該位置有關的網頁的鏈接。但是，即使我另有指定，所有標記都會在信息窗口中顯示相同的內容。這是我的代碼，你可以試着修復它嗎？所有信息窗口顯示我最後指定的聲明的內容。我只是在這裏粘貼了所有的代碼，因爲我可能在任何地方犯了一個錯誤。謝謝...在Google Maps API中，如何在多個信息窗口中插入多個標記？

<!doctype html> 
<head> 
<title>L4H Expansion</title> 

<style type="text/css"> 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

a { 
    color: #8c4e94; 
    text-decoration: none; 
} 

p { 
    line-height: 1.8; 
    margin-bottom: 15px; 
    font-family: 'georgia', serif; 
    font-size: 14px; 
    font-weight: normal; 
    color: #6d6d6d; 
} 

#map_canvas { 
    height: 100%; 
} 

#header { 
    background: url('http://static.tumblr.com/asviked/Cqklq72up/header.png') top center repeat-x; 
    height: 105px; 
    border-bottom: 1px solid #e0e0dc; 
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    z-index: 99; 
} 

#headercon { 
    width: 900px; 
    margin: 0 auto; 
} 

#headerwrap { 
    background: url('http://static.tumblr.com/asviked/dzAlqx6kq/title.png') top left no-repeat; 
    width: 900px; 
    overflow: hidden; 
    height: 100px; 
} 

</style> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var Manassas = new google.maps.LatLng(38.751272,-77.475243); 
    var London = new google.maps.LatLng(51.611544,-0.178072); 
    var Richmond = new google.maps.LatLng(37.543216,-77.468376); 
    var Harrisonburg = new google.maps.LatLng(38.451841,-78.868961); 

    var myOptions = { 
     zoom: 4, 
     center: Manassas, 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
     disableDefaultUI: true 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var marker = new google.maps.Marker({ 
     position: Manassas, 
     map: map, 
     title:"Linux4Hope Manassas VA", 
     icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png' 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     position: Manassas, 
     content: '<p><a href="http://www.linux4hope.org">Linux4Hope, Manassas VA, USA</a></p>' 
    }); 

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

    var marker = new google.maps.Marker({ 
     position: London, 
     map: map, 
     title:"Linux4Hope UK", 
     icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png' 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     position: London, 
     content: '<p><a href="http://www.linux4hope.org.uk">Linux4Hope, London, United Kingdom</a></p>' 
    }); 

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

    var marker = new google.maps.Marker({ 
     position: Richmond, 
     map: map, 
     title:"Linux4Hope Richmond VA", 
     icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png' 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     position: Richmond, 
     content: '<p><a href="http://www.linux4hope.org">Linux4Hope, Richmond VA, USA</a></p>' 
    }); 

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

    var marker = new google.maps.Marker({ 
     position: Harrisonburg, 
     map: map, 
     title:"Linux4Hope Harrisonburg VA", 
     icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png' 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     position: Harrisonburg, 
     content: '<p><a href="http://www.linux4hope.org">Linux4Hope, Harrisonburg VA, USA</a></p>', 
    }); 

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

    } 
</script> 
</script> 
</head> 
<body onload="initialize()"> 

<div id="header"> 
    <div id="headercon"> 
     <a href="http://www.linux4hope.org"> 
      <div id="headerwrap"> 
      </div> 
     </a>   
    </div> 
</div> 

<div id="map_canvas"></div> 

</body> 

</html>

來源

2011-09-05 mkras

我也許應該指出，這是我第一次使用JavaScript，所以我不知道任何與JS相關的術語。但是，我得到的答案是有幫助的。 :) – mkras

您需要爲標記和infowindow使用不同的名稱，否則您將覆蓋它們。

我建議使用數組來存儲信息（latlng，title，content）並在循環內創建標記/窗口。

來源

2011-09-05 18:37:30

謝謝，我現在有不同的標記和infowindow名稱。 :) 數組和循環是好主意......我是JS的新手，直到你提到他們才知道這些。 – mkras

這裏的問題是您重複使用變量。您的點擊事件處理程序是所有匿名函數，直到事件發生時纔會被調用。當函數被調用時，它們關閉封裝它們的函數的範圍。由於您重用了變量名稱，除最後一個infowindow之外的所有值都將被覆蓋，因此只會顯示infowindow。

你可以爲每個位置創建單獨的變量：

var marker1,infowindow1,marker2,inforwindow2, ...

...並相應地分配他們，但更好的方法是創建職位和相應的信息窗口的數據結構。

var locations = { 
'London' : { 
marker : new google.maps.Marker({ ... }), 
inforwindow : new google.maps.InfoWindow({ ... }); 
}, 
'Manassas' : { ... }

現在您可以遍歷數據結構並將每個標記和infowindow連接在一起。

來源

2011-09-05 18:39:49

非常感謝您的回答。而且，數據結構是一個更好的方法。我正在使用它。 :) – mkras

發生這種情況是因爲事件處理程序被觸發的時間全部是infowindow變量指向同一個對象。有一些快速修復，你可以只重命名變量（像infowindow1，infowindow2 ...），添加更多的倒閉：

(function(){ 
    var marker = new google.maps.Marker({ 
     position: London, 
     map: map, 
     title:"Linux4Hope UK", 
     icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png' 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     position: London, 
     content: '<p><a href="http://www.linux4hope.org.uk">Linux4Hope, London, United Kingdom</a></p>' 
    }); 

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

或

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

來源

2011-09-05 18:42:13 Prusse

非常感謝，我用你的建議與關閉，我重命名變量。 – mkras

如果你使用閉包，你不需要重命名變量，我應該說「）或者添加幾個閉包」。 – Prusse

在Google Maps API中，如何在多個信息窗口中插入多個標記？

回答

相關問題