javascript - 谷歌地图 API v3 : infowindow position

Question

我正在制作一张带有不同标记的 map ，它应该有不同的信息窗口。但是当我试图在多个标记上放置一个信息窗口时，信息窗口的位置停留在第一个点击的标记处。我做错了什么？

<script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(53.033117,5.639752);

        var latingSiton = new google.maps.LatLng(53.0356197730161,5.62613738302669);
        var SitonImg = 'images/siton.png';
        var latingZee = new google.maps.LatLng(53.0360534900284,5.62488617774811);
        var ZeeImg = 'images/zee.png';
        var latingHylkema = new google.maps.LatLng(53.0373853769166,5.62924255777811);
        var HylkemaImg = 'images/hylkema.png';
        var latingDijkstra = new google.maps.LatLng(53.0360125088934,5.62735529113307);
        var DijkstraImg = 'images/dijkstra.png';

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

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

        var contentString = 'test';

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

          var marker = new google.maps.Marker({
              position: latingSiton, 
              map: map, 
              icon: SitonImg,
            });

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

          var marker = new google.maps.Marker({
              position: latingZee, 
              map: map, 
              icon: ZeeImg,
          });

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

          var marker = new google.maps.Marker({
              position: latingHylkema, 
              map: map, 
              icon: HylkemaImg,
          });

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

          var marker = new google.maps.Marker({
              position: latingDijkstra, 
              map: map, 
              icon: DijkstraImg,
          });

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

谢谢转发!

Answer 1

或者，代替 Pratik 的建议，试试这个:

var marker = new google.maps.Marker({
     position: latingSiton, 
     map: map, 
     icon: SitonImg
});

// repeat this line after each new Marker is created:
bindInfoWindow(marker, map, infowindow);

然后创建一个新函数:

function bindInfoWindow(marker, map, infowindow) {
    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });
}