0

我正在尝试使用从我的 Google Fusion Tables 导出的数据创建地图。问题是，我有很多数据要显示，包括文本和图像。我想用标签创建信息窗口。

当我单击标记时，我将如何显示信息气泡？我现在要检索 Google Fusion Tables 数据的代码是：

layer = new google.maps.FusionTablesLayer({
    map: map,
    query: {
        select: "col1",
        from: "xxxxxxxxxxxxxxxxxxxxxxxxxx"
    },
    options: {
        styleId: 3,
        templateId: 3
    }
});

我已经在寻找解决这个问题的方法，并找到了这个示例http://jsbin.com/efobeg/13/edit。

编辑：

这是我目前正在处理的代码。

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 3,
        center: new google.maps.LatLng(0,0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'col7',
            from: '10NhYAiDivSpUnjvNsOwZVTEPV-RjhRGmyEOGjs4'
        },
        map: map,
        suppressInfoWindows: true,
        options: {
            styleId: 2,
            templateId: 3
        }
    });

    var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(layer, 'click', function(e) {
        var name = e.row['restaurantname'].value;   
        var cuisine = e.row['cuisine'].value;
        var address = e.row['full_address'].value;
        var rating = e.row['rating'].value;
        if (rating != "") {
            if (rating == 1) {
                rating = "http://exrx.net/test_weewok2/1.png";
            } else if (rating == 2) {
                rating = "http://exrx.net/test_weewok2/2.png";
            } else if (rating == 3) {
                rating = "http://exrx.net/test_weewok2/3.png";
            } else if (rating == 4) {
                rating = "http://exrx.net/test_weewok2/4.png";
            } else {
                rating = "http://exrx.net/test_weewok2/5.png";
            }
        } else {
            rating = "http://exrx.net/test_weewok2/1.png";
        }

        var review = e.row['review'].value;
        if (review == "") {
            review = "No one has reviewed this place.";
        }
        var contentString = [
            '<div class="tabs">',
                '<ul>',
                    '<li><a href="#tab-1"><span>Overview</span></a></li>',
                    '<li><a href="#tab-2"><span>Review</span></a></li>',
                    '<li><a href="#tab-3"><span>Images</span></a></li>',
                '</ul>',
                '<div id="tab-1">',
                    '<b>' + name + '</b><img src="' + rating + '" /><br>',
                    '<font size=1><b>' + address + '</b></font></center>',
                    '<p align=justify><font size=1>' + cuisine + '</font>',
                    '</p>',
                '</div>',
                '<div id="tab-2">',
                    '<p align=justify><i>&quot;' + review + '&quot;</i></p>',
                '</div>',
                '<div id="tab-3">',
                    '<p>Images will be displayed here.</p>',
                '</div>',
            '</div>'
          ].join('');

          infowindow.setContent(contentString);
          infowindow.setPosition(e.latLng);
          infowindow.open(map);
          $(".tabs").tabs({ selected: 0 });
    });
}

截屏： 地图截图

4

0 回答 0