Question

我映射了一些对象，并使用以下脚本创建了信息窗口：

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  info: '<h3 style="color:brown">' + ThName + '</h3>' + 
  '<img src = "' + photo1 + '" style="width:200px;height:150px; vertical-align:top;margin-right:.5em"/>' + 
  '<img src = "' + photo2 + '" style="width:200px;height:150px; vertical-align:top"/>' + 
  '<br/> ' + cap1 + ' ' + cap2
});

如何将标题cap1放在photo1下，将cap2放在photo2下？

我最初的想法是创建一个具有两列两行的表，但是我不知道如何。

Answer 1

我正在为当前项目使用Google Maps API，并出于相同目的使用了信息窗口。如果愿意，可以类似的方式使用它：

    var contentString = '<h3 style="color:brown">' + ThName + '</h3>' + 
                        '<figure>'+ '<img src = "' + photo1 + 
                        '"style="width:200px;height:150px; vertical- 
                        align:top;margin-right:.5em"/>' +
                        '<figcaption>'+ cap1 + '</figcaption>' +
                        '</figure>' + '<figure>'+ '<img src = "' + photo2 + 
                        '"style="width:200px;height:150px; vertical- 
                        align:top;"/>' +'<figcaption>'+ cap2 + 
                        '</figcaption>' + '</figure>';

    var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    content: contentString
    });

对于字幕，我使用了Figure和figcaption标记。

Google地图：信息窗口

1 个答案: