在信息窗口中設置標記Clusterer標記

我在設置Google地圖API中多個標記的信息窗口時遇到了問題。基本上，我從外部Json文件獲取緯度和經度以及其他所有內容。我正在解析它，因爲標記顯示在地圖上。但是，當我試圖爲每個人添加一個信息窗口時，只顯示最近添加的標記的信息窗口+每當我指向不同的標記時，它仍然會顯示最新的標記，顯示其信息窗口。這裏的源代碼：在信息窗口中設置標記Clusterer標記

function initialize() 
    { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = { 
     zoom: 1, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    /* Sets up markers */  
    markers = []; 

     for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
     { 
     //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 

     var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png"); 
      var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 
       var marker = new google.maps.Marker({position: LatLng, icon: iconImage }); 

     var contentString = '<div>'+ 
       '<div>'+ 
       '</div>'+ 
      '<h4>'+coordinates.title+'</h1>'+ 
       '<div>'+ 
       '<p>'+coordinates.excerpt+'</p>'+ 
       '</div>'+ 
       '</div>'; 

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

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


     markers.push(marker); 
     } 

     /* Sets up marker clusterer */ 
     var markerCluster = new MarkerClusterer(map, markers); 
    }

有人可以請給我一些幫助嗎？謝謝。

//已編輯------------------------------------------- -----------

所以我已經改變了它，現在它看起來像這樣：

infoWindow = new google.maps.InfoWindow(); 

    for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
    { 
       //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 

       var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png"); 
       var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 
       var marker = new google.maps.Marker({position: LatLng, icon: iconImage }); 

       var contentString = '<div>'+ 
            '<div>'+ 
            '</div>'+ 
            '<h4>'+coordinates.title+'</h1>'+ 
            '<div>'+ 
            '<p>'+coordinates.excerpt+'</p>'+ 
            '</div>'+ 
            '</div>'; 

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

       markers.push(marker); 
    } 

    /* Sets up marker clusterer */ 
    var markerCluster = new MarkerClusterer(map, markers);

還不行：/

來源

2010-10-21 Pavel

至於我知道，你只能有一個InfoWindow。您應該爲定義窗口內容的每個標記添加一個onclick事件。

我想你應該改變：

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

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

喜歡的東西：

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

信息窗口應該之外您的循環來定義。

祝你好運！

**編輯**

我認爲你需要使用唯一的名稱爲您的標記。

這是一個工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;key= 
    <<INSERT YOUR KEY HERE>>" type="text/javascript"></script> 
<script> 
function initialize() { 
// Create google map 
var latlng = new google.maps.LatLng(31.0293534,5.1736923); 
var myOptions = { 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    zoom: 1, 
    backgroundColor: "#99B3CC", 
    mapTypeControl: false 
} 
var map = new google.maps.Map(document.getElementById("map"), myOptions); 
var infoWindow = new google.maps.InfoWindow(); 

/** 
* First marker 
*/ 

var latLng = new google.maps.LatLng(31.0293534,5.1736923); 
var marker1 = new google.maps.Marker({ 
    map: map, 
    position: latLng, 
    visible: true 
}); 


google.maps.event.addListener(marker1, 'click', function() { 
    infoWindow.setContent("Some content Marker 1"); 
    infoWindow.open(map,marker1); 
}); 

/** 
* Second marker 
*/ 

var latLng = new google.maps.LatLng(25.271139,55.307485); 
var marker2 = new google.maps.Marker({ 
    map: map, 
    position: latLng, 
    visible: true 
}); 
marker2.onclick = function() { 
    infoWindow.setContent("Some content marker2"); 
    infoWindow.open(map,marker2); 
}; 
google.maps.event.addListener(marker2, 'click', function() { 
    infoWindow.setContent("Some content marker2"); 
    infoWindow.open(map,marker2); 
}); 
} 
window.onload=initialize; 
</script> 

</head> 
<body> 
<div id="map" style="width: 400px; height: 400px;"></div> 
</body> 
</html>

您可能需要更改的關鍵。但在我的地方，這就像一個魅力。我可以給你的最簡單的例子。

來源

2010-10-21 09:05:58

好的我找到了解決方案。這有點破解，但它適用於我。我把它放在這裏以防別人需要它：

<script type="text/javascript"> 

    /* Sets up the map with markers */ 
    function initialize() 
    { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = { 
     zoom: 1, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

     /* Sets up markers */  
     markers = []; 

     infoWindow = new google.maps.InfoWindow();    

     for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
     {    

        var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png"); 
        var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 
        var marker = new google.maps.Marker({position: LatLng, icon: iconImage }); 

        var contentString = '<div>'+ 
             '<h4>'+coordinates.title+'</h1>'+ 
             '<div>'+ 
             '<p>'+coordinates.excerpt+'</p>'+ 
             '</div>'+ 
             '</div>'; 

        addMarker(marker, contentString); 
        markers.push(marker); 
     } 

     /* Sets up marker clusterer */ 
     var markerCluster = new MarkerClusterer(map, markers); 


     function addMarker(marker, content) 
     { 
      google.maps.event.addListener(marker, 'click', function() { 
          infoWindow.setContent(content); 
          infoWindow.open(map, marker); 
     }); 
     } 

    } 

</script>

來源

2010-10-22 07:30:22 Pavel

在信息窗口中設置標記Clusterer標記

回答

相關問題