Question

是否有人知道使用Google地图创建包含侧边栏

的地图的示例

http://econym.org.uk/gmap/example_map4c.htm

和标签信息窗口

http://econym.org.uk/gmap/example_map10a.htm？

标记已定义并准备好用于侧边栏

      function createMarker(point,name,html) {
        var marker = new GMarker(point,{icon:myIcon});

        // add a line to the side_bar html
        side_bar_html += '<div id="'+linkid+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br><\/div>';
        return marker;
      }

侧边栏从为标记定义的“名称”获取其标题：

var marker = createMarker(point,"Point Title", 'Point Content')
map.addOverlay(marker);

通过将标记传递到数组来生成标签：

      function createTabbedMarker(point,htmls,labels) {
        var marker = new GMarker(point);

和

   var marker = createTabbedMarker(point, ["Tab 1 contents", "Tab 2 contents","Tab 3 contents","Tab 4 contents"],["One","Two","Three","Four"]);
      map.addOverlay(marker);

我的问题是我怎样才能抓住数组[标签]的第一部分，在这个例子中是'One'，并且这是侧边栏的输出？

Answer 1

第一个示例中的侧边栏不是Google Maps API的功能;我只是一个用Javascript更新的表格单元格。

Answer 2

这是可行的...如果您在Gmarker或更具体地Gmarker.openInfoWindowTabsHtml上查看Google地图文档，您会看到它需要两个参数：

GInfoWindowTab的数组
一个GInfoWindowOptions javascript对象。

在GInfoWindowOptions的文档中，您将看到可以通过selectedTab属性传递选项卡索引。在这种情况下，我们可以使用sidebar example中的代码，只需更新myclick函数：

function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

变为：

function myclick(i, tab_index) {
        gmarkers[i].openInfoWindowHtml(htmls[i], { selectedTab : tab_index });
      }

我们更新createMarker函数以接受此标记应具有的标签数量：

createMarker(point,name,html,tab_count) {
    // ...snip ...
    var links_html_temp = "";
    while (--tab_count) {
         links_html_temp = '<a href="javascript:myclick(' + i + ',' + tab_count + ')">' + name + ': Tab #' + tab_count + '<\/a><br>' + links_html_temp;
    }
    side_bar_html += links_html_temp;

我会将其留给您自己的特定实现，以将相应的标签计数传递给createMarker。

使用谷歌地图v2的侧边栏和选项卡式信息窗口

2 个答案: