谷歌地图API v3添加多个标记和信息窗口，带有自定义文本。

Question

谷歌地图API v3添加多个标记和信息窗口，带有自定义文本。

javascriptgoogle-maps-api-3markerinfowindow

6

我正在制作一个关于挪威自行车事故受害者的网站。在我的项目中，我一直在使用Google Maps API v3，但我对JavaScript只有模糊的了解。您可以在此处查看我的成果：http://salamatstudios.com/googlemapstest/ 基本上，我想要在地图上放置多个带有信息窗口的标记。每个信息窗口都将包含以下内容：姓名（年龄），位置，死亡日期，阅读更多（将链接到网站上的页面）。

就像这个例子一样：http://salamatstudios.com/bicycles/ 我尝试过只使用一个标记和信息窗口，那很好用。但是当我想添加具有自定义信息窗口的新标记时，我卡住了。目前，我在不同位置上有3个标记，如第一个链接中所示，但单击标记时没有任何信息窗口出现。

我该如何编写代码以使信息窗口出现？我如何在每个信息窗口中设置自定义文本？完成后，我将在地图上放置大约30-40个标记。所有信息窗口将具有不同类型的信息。

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(65.18303, 20.47852),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,


      // MAP CONTROLS (START)
      mapTypeControl: true,

      panControl: true,
      panControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
      },

      zoomControl: true,
      zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE,
      position: google.maps.ControlPosition.LEFT_TOP
      },

      streetViewControl: true,
      streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
      },
      // MAP CONTROLS (END)



    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);


    // -------------- MARKER 1
    var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(59.96384, 11.04120),
    map: map,
    icon: 'img/bike5.png'
    });


    // MARKER 1'S INFO WINDOW
    var infowindow1 = new google.maps.InfoWindow({
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, marker);
    });
    // -------- END OF 1st MARKER


    // -------------- MARKER 2
    var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(60.63040, 8.56102),
    map: map,
    icon: 'img/bike5.png'
    });

    // MARKER 2'S INFO WINDOW
    var infowindow2 = new google.maps.InfoWindow({
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker2, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow2.open(map, marker);
    });
    // -------- END OF 2nd MARKER


    // -------------- MARKER 3
    var marker3 = new google.maps.Marker({
    position: new google.maps.LatLng(60.39126, 5.32205),
    map: map,
    icon: 'img/bike5.png'
    });

    // MARKER 3'S INFO WINDOW
    var infowindow3 = new google.maps.InfoWindow({
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker3, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow3.open(map, marker);
    });
    // -------- END OF 3rd MARKER


  }
  google.maps.event.addDomListener(window, 'load', initialize);

希望有人能给我一些提示。我已经试着搜索了一下，但是我真的找不到我的答案。提前感谢！:-)

- Nader S

3个回答

2

除了HoangHieu的回答之外，当您使用for循环时，最好按照以下方式使用它：

marker.info = new google.maps.InfoWindow({
  content: 'some text'
});

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

- Abhijit Gujar

这实际上是一种更聪明的方法，而不是实例化 infowindow1，infowindow2 等。 - Raptor

1

 google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, marker);
    });

改为：

变成

 google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, this);
 });

- HoangHieu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geocodezip · Accepted Answer

您需要将信息窗口附加到正确的标记上。目前它们都与“marker”相关联，但该标记不存在（当您单击标记时应在JavaScript控制台中显示错误消息）。

在点击监听器内更改为：

infowindow1.open(map, marker);

infowindow2.open(map, marker);

infowindow3.open(map, marker);

To:

infowindow1.open(map, marker1);

infowindow2.open(map, marker2);

infowindow3.open(map, marker3);

working example