在谷歌地图API，我如何插入多个标记与多个信息窗口

In the Google Maps API, how do I insert multiple markers with multiple info windows?

本文关键字：窗口 信息窗 信息 插入 API 谷歌地图 何插入      更新时间：2023-09-26

我使用的是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>

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

我建议使用数组来存储信息(latlng,title,content)，并在循环中创建标记/窗口。

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

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

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

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

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

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

这是因为事件处理程序被触发时，所有的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)
});
相关文章：