在信息窗口中设置标记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标记

回答

相关问题