Google 地图街景仅在第一次显示

Question

我有一个 google 地图页面，其中填充了来自数据库的标记。在标记 InfoWindow 中有一个可点击的 link，它会打开一个带有该位置街景视图的 jquery 对话框。问题是，StreetView 仅在我第一次单击 InfoWindow link 时显示。如果我关闭对话框并尝试再次打开它（单击其他信息窗口或什至再次单击同一个信息窗口），我会得到带有 StreetView 控件的对话框，新地址也会显示（"Address is approximate"），但其余的对话框的颜色是统一的浅灰色。

我已经尝试了一些在 Whosebug 上发布的 warkarounds（比如 this one），但灰色对话框在我的情况下仍然存在。

编辑：JSFiddle Example

使用 onclick 侦听器创建标记：

function addMarker(feature) {
    var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
    });
    //Create Infowindow
    var infowindow = new google.maps.InfoWindow();
    var content = '<h1 id="Heading" class="Heading">' + feature.shopName + '</h1>' +
                  '<div id="iwcontent" class="iwcontent">'+
                  '<p><b>Naslov : </b>' + feature.shopAddress + '</br>' +
                  '<p><b>Telefon : </b>' + feature.shopTel + '</br>' +
                  '</div>'+
                  '<div id="iwsw" class="iwsw">StreetView</div>'
                  ;
    //Call StreetView
    google.maps.event.addDomListener(infowindow, 'domready', function () {
        $('.iwsw').click(function () {
            showStreetView(feature.position);
        });
    });
    .
    .
    .

showStreetView 功能：

//Display dialog with streetview
function showStreetView(position){
    var panoramaOptions = {position: position, pov: {heading: 34,pitch: 10}};
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("dialog-sw-canvas"), panoramaOptions);
    map.setStreetView(panorama);
    $( "#dialog-sw-canvas" ).dialog("open");
}

对话框定义：

$(function(){
    $('#dialog-sw-canvas').dialog({
        title: 'Street View',
        width: 1024,
        height: 768,
        closed: true,
        cache: false,
        modal: true,
        onClose: function(){
            $('#dialog-sw-canvas').empty();
        }
    });
});

万事如意，但只有一次。

Answer 1

打开对话框后触发全景图的resize-event，然后API就可以重新计算全景图的大小了：

//Display dialog with streetview
function showStreetView(position){
    var panoramaOptions = {position: position, pov: {heading: 34,pitch: 10}};
    var panorama = new  google.maps
        .StreetViewPanorama(document.getElementById("dialog-sw-canvas"), panoramaOptions);
    map.setStreetView(panorama);
    $( "#dialog-sw-canvas" ).dialog("open");
    google.maps.event.trigger(panorama,'resize');
}

Google 地图街景仅在第一次显示

Google Maps StreetView displays only the first time

javascript

jquery-ui

google-maps-api-3