Question

如何让我的infoWindows有标签内容？我尝试过这样的事情：

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

* 还尝试使用infoWidnwow，infowindow和iw代替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的{{1}}。

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，然后用它来制作标签。

如何让infowindows在Google Map中有标签？

2 个答案: