如何在特定于标记的信息窗口中显示内容？

Question

我创建了一个谷歌地图（api v3），其标记数量取决于搜索结果。当我单击标记时，它会打开一个信息窗口。让该信息窗口显示与其标记相关联的信息的最佳方式是什么？与所有标记相关的信息都在我从 ajax 请求收到的 json 对象中。

for (i=0; i < result.point.length; i++) {
                    var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);                                    
                    var marker = new google.maps.Marker({
                        position: latLng,
                        title: i.toString()
                        //map: map
                    });
                    markersArray.push(marker);

                    var infowindow = new google.maps.InfoWindow({
                        content: 'specific information associated to the marker clicked'
                    });

                    google.maps.event.addListener(markersArray[i], 'click', function(event) {
                        infowindow.open(map, this);
                    });

Answer 1

按照上面的建议只创建 1 个信息窗口。

标记内的内容存储：

var marker = new google.maps.Marker({
                        position: latLng,
                        title: i.toString(),
                        //set your content here
                        content:'your specific content'
                        //map: map
                    });

开窗：

google.maps.event.addListener(markersArray[i], 'click', function(event) {
                        infoWindow.setContent(this.content);
                        infowindow.open(map, this);
                    });

Answer 2

首先，您应该将 infoWindow 的创建移出 for 循环。

接下来，更改将点击事件附加到此的位置：

google.maps.event.addListener(markersArray[i], 'click', function(content) {
    return function(event){
        infowindow.setContent(content);
        infowindow.open(map, this);
    }
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));

您想使用 this 而不是 ma​​rker。 this 将引用发生事件的对象，而 ma​​rker 将引用最后创建的标记。

Answer 3

你的例子中有一些错别字（proint）在你循环的顶部：

for (i=0; i < result.point.length; i++) {
   var info_window_content = result.point[i].Latitude + '<br />';
   info_window_content += result.point[i].Longitue + '<br />';
   // etc for any value in you json object
   // create your marker as is.
     ...
  var infowindow = new google.maps.InfoWindow({
                    content: info_window_content
                });
  // etc, etc.

您确实需要为每个标记添加一个 eventListener，就像您正在做的那样。我看不出有什么问题。 除了我会使用 infoWindow.open(map, marker) vs. this。

可能有一种更有效的方法来做到这一点，即在 infoWindow.open(); 之后infoWindow.setContent(info_window_content)

Answer 4

试试这个，效果很好，我已经测试过了

// Add markers

   for (i=0; i < result.point.length; i++) {
                    var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);                                    
                    var marker = new google.maps.Marker({
                        position: latLng,
                        title: i.toString()
                        //map: map
                    });                    

    // marker info start
                    var infowindow = new google.maps.InfoWindow();

    (function (marker, result.point[i]) {
                    // add click event
                    google.maps.event.addListener(marker,  'click',  function() {
                    var infoContent: "specific information associated to the marker clicked"
                    });
        infoWindow.setContent(infoContent);
                        infowindow.open(map, marker);
                    });

    // selected marker 4 infowindow 
    (marker, result.point[i]);

       markersArray.push(marker);
      }

Answer 5

不完全确定您要做什么。您要在哪里/要加载什么内容？

google.maps.event.addListener(marker, 'click', (function(event, index) {
  return function(){
  infowindow.content = markersArray[index].yourcontent;
  // or
  infowindow.content = yourcontentarray[index];
  infowindow.open(map,this);
  }
})(marker,i));

确保在函数之外声明标记和信息窗口变量。