Question

我正在使用Google Maps API v3。我有一张地图占据了整个页面上的自定义标记。我希望每个标记在单击时打开一个信息窗口，其中包含指向与该位置相关的网页的链接。但是，即使我另有说明，所有标记在信息窗口中显示相同的内容。这是我的代码，你可以试着解决它吗？所有信息窗口都显示我上次指定声明的内容。我刚刚粘贴了所有代码，因为我可能在任何地方都犯了错误。感谢...

<!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>

Answer 1

您需要为标记和infowindow使用不同的名称，否则您将覆盖它们。

我建议使用数组存储信息（latlng，title，content）并在循环内创建标记/窗口。

Answer 2

这里的问题是您重用变量。您的单击事件处理程序是所有匿名函数，在事件发生之前不会调用它们。调用函数时，它们会封闭封装它们的函数的范围。因为您重复使用变量名称，所以除了最后一个infowindow之外的所有值的值都会被覆盖，因此只会出现该infowindow。

您可以为每个位置创建单独的变量：

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

...并相应地分配它们，但更好的方法是创建位置和相应信息窗口的数据结构。

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

现在，您可以遍历数据结构并在途中连接每个标记和信息。

Answer 3

这是因为触发事件处理程序的时间所有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)
});

在Google Maps API中，如何在多个信息窗口中插入多个标记？

3 个答案: