2

infoWindows にタブ付きコンテンツを表示するにはどうすればよいですか? 私は次のようなことを試しました：

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

*また、キーワードの代わりに、、およびを使用しようとしましたinfoWidnwowinfowindowiwthis

と

.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。

4

2 に答える 2

0

投稿した最初の 3 つのスニペットを削除し、これを使用します。

$('#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 を指定し、それを使用してタブを作成しました。

于 2012-06-07T18:10:24.100 に答える