javascript - 如何让信息窗口在谷歌地图中有标签？

Question

如何使我的 infoWindows 具有选项卡式内容？我试过这样的事情：

google.maps.event.addListener(this, "domready", function(){ $("#info").tabs() });

*也尝试使用infoWidnwow, infowindow, andiw代替this关键字

和

.ready(function(){ $("#info").tabs();});

和

.bind('domready', function(){ $("#info").tabs(); });

这些都不起作用。

创建标记和信息窗口的代码：

$('#map').gmap(mapOptions).bind('init', function(){
    $.post('getmarkers.php', function(json){
        var theMarkers = json;
        $.each(theMarkers, function(i, element) {
            $.each(element, function(object, attributes){
                $('#map').gmap('addMarker', { 
                    'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)), 
                    'bounds':true } ).click(function(){                             
                        $('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);                        
                }); 
            });
        });
    }); 
});

不知何故，我需要告诉这部分：

$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);      

标记content我传递给的openInfoWindow.

Answer 1

有一个免费的 jquery 插件可以处理多个选项卡、每个选项卡的定位和我刚刚发现的样式，它有一个直观的自定义界面。这是一个演示

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Answer 2

删除您发布的前三个片段并使用它：

$('#map').gmap(mapOptions).bind('init', function() {
    $.post('getmarkers.php', function(json) {
        var theMarkers = json;
        $.each(theMarkers, function(i, element) {
            $.each(element, function(object, attributes) {
                $('#map').gmap('addMarker', {
                    'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
                    'bounds': true
                }).click(function() {
                    var ts = $.now();
                    $('#map').gmap('openInfoWindow', {
                        "<div id='" + ts + "info'>... your tab content ..."
                    }, this);
                    $('#' + ts + 'info').tabs();
                });
            });
        });
    });
});​

我创建了一个唯一的字符串并用它给 div 一个唯一的 id，然后用它来制作标签。