javascript - 如何在 Google Maps InfoWindow 中为多个位置实现分页？

Question

我有 google map ，具有多个位置和同一位置的多个标记。

我的 map 数据会是这样

[{"DisplayText": "Test Window 1 - 1", "LatitudeLongitude": "61.095,10.547", "Location": "Oslo"},
{"DisplayText": "Test Window 1 - 2", "LatitudeLongitude": "61.095,10.547", "Location": "Oslo"},
{"DisplayText": "Test Window 2 - 1", "LatitudeLongitude": "61.585,8.369", "Location": "Ringebu Municipality"},
{"DisplayText": "Test Window 2 - 2", "LatitudeLongitude": "61.585,8.369", "Location": "Ringebu Municipality"},
{"DisplayText": "Test Window 1 - 3", "LatitudeLongitude": "61.095,10.547", "Location": "Oslo"},
{"DisplayText": "Test Window 3 - 1", "LatitudeLongitude": "61.778,11.3609", "Location": "Oslo Municipality"},
{"DisplayText": "Test Window 4 - 1", "LatitudeLongitude": "63.485,10.449", "Location": "Trondheim"}]

我需要在 Google 信息窗口的 slider 中显示具有相同纬度和经度的数据。

有一个 FIDDLE 那样显示。但是我需要显示多个具有分页功能的标记

Answer 1

这可以手动实现，利用 setContent InfoWindow 上的方法.

几年前我做过类似的事情 - 看它的实际演示，加载以下页面并等待一段时间让标记出现: http://www.auctionsearchkit.co.uk/search.php?satitle=test&site=UK .然后点击几个标记，直到你来到一个信息窗口有 « 的地方。 < > »顶部的图标(这是同一卖家的多个 eBay 搜索结果的位置)。您可以查看 HTML 页面上的 Javascript 以获取更多详细信息，但基本上(删除了一些位)您需要这样的东西:

function getInfoWindowHtml(pc) {
  var infoWindowHtml = '<span' + MOUSE_OVER_HAND 
                               + ' title="View the first item at this location"'
                               + ' onclick="viewFirstItem(\'' + pc + '\')">'
                     + '&laquo;</span>&nbsp;'
                     + '<span' + MOUSE_OVER_HAND 
                               + ' title="View the previous item at this location"'
                               + ' onclick="viewPrevItem(\'' + pc + '\')">'
                     + '&lt;</span>&nbsp;'
                     + '<span' + MOUSE_OVER_HAND
                               + ' title="View the next item at this location"'
                               + ' onclick="viewNextItem(\'' + pc + '\')">'
                     + '&gt;</span>&nbsp;'
                     + '<span' + MOUSE_OVER_HAND
                               + ' title="View the last item at this location"'
                               + ' onclick="viewLastItem(\'' + pc + '\')">'
                     + '&raquo;</span>&nbsp;&nbsp;' :
                       '')
                   + '...etc...';
  }

  return infoWindowHtml;
}

...和类似下面的代码来打开它:

  // Open the Info Window
  var html = getInfoWindowHtml(pc);
  infoWindow.setContent(html);
  infoWindow.open(map, marker);

然后您需要实现 viewFirstItem , viewLastItem , viewNextItem和 viewPrevItem适本地更改 infoWindow 的 HTML 的函数。