我正在建立一个有关在挪威遇难的骑自行车者的网站。对于我的项目,我一直在使用google maps api v3,但是我对javascript不太了解。到目前为止,您可以在这里看到我的结果:http://salamatstudios.com/googlemapstest/

基本上,我希望每个信息窗口上都有多个标记。每个信息窗口将包含:
姓名年龄),
地点,
死亡日期,
阅读更多信息(将链接到网站本身的页面)。

就像这里的例子:http://salamatstudios.com/bicycles/

我尝试只使用一个标记和信息窗口,但效果很好。当我想在每个标记上添加带有自定义信息窗口的新标记时,我会卡住。目前,我在第一个链接中看到了3个标记,它们位于不同的位置,但是当我单击标记时,没有任何信息窗口出现。

如何解决它以便对其进行编码,以便出现信息窗口?以及如何在每个信息窗口中使用自定义文本?完成后,我将在 map 上放置大约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);

如果有人能给我一个线索,那就太好了。我尝试了一些搜索,但是找不到真正的答案。提前致谢! :-)

最佳答案

您需要将信息窗口附加到正确的标记上。当前,它们都与“标记”相关联,该标记不存在(当您单击标记时,会在JavaScript控制台中导致错误消息)。

在点击监听器内部进行更改:

infowindow1.open(map, marker);

infowindow2.open(map, marker);

infowindow3.open(map, marker);

至:
infowindow1.open(map, marker1);

infowindow2.open(map, marker2);

infowindow3.open(map, marker3);

working example

关于javascript - Google Maps API v3通过带有自定义文本的/信息窗口添加多个标记,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16825290/

10-12 01:25
查看更多