設置StreetViewPanorama的兩個屬性會導致競爭狀態？

我使用街景的javascript api打開特定位置的視圖。我希望觀衆在某一點是兩者，在某個方向上面對，所以我有這個調用（如documentation）：設置StreetViewPanorama的兩個屬性會導致競爭狀態？

panorama.setOptions({ 
    pano: data.location.pano, 
    pov: mypov 
});

我認爲，將圖像從履行兩個選項取絕獲得交錯或東西，因爲大約有一半的時間在屏幕上結束了多個圖像的鑲嵌：

當我註釋掉setPov，當然認爲正面臨着錯誤的方向，但重疊圖像瓷磚問題消失了。此外，只要用戶開始拖動鼠標，街景視圖就會在正確的圖像拼貼圖上找到並拋出不正確的圖像。

有什麼辦法可以防止這種情況發生？或者是否有「我加載的所有圖像」事件可以偵聽，然後觸發拖動事件？

編輯：這裏是一個演示的jsfiddle：http://jsfiddle.net/p244m3qp/11/ 在我的瀏覽器，如果我伸展「結果」窗格中儘可能的大，它會顯示約1/3的「馬賽克」行爲的1/2動畫幀。

來源

2016-03-02 rescdsk

'.setOptions（）'？ – geocodezip

我沒有看到問題，請提供一個[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）問題。 – geocodezip

夠公平的！剛剛添加了一個''.setOptions（）'是一個非常好的主意，但不幸的是它仍然會發生（就像在jsfiddle中一樣） – rescdsk

我想出瞭如何防止你的錯誤。 http://jsfiddle.net/wf9a5m75/p244m3qp/31/

關鍵是在後臺預加載streetview。

首先，您需要創建兩個全景div。

<script src="http://maps.googleapis.com/maps/api/js?language=en"></script> 
<div id="err"></div> 
<div id="pv-container"> 
    <div id="backscreen"></div> 
    <div id="map-canvas"></div> 
</div>

的< DIV ID = 「地圖畫布」/ >重疊< DIV ID = 「backscreen」/用CSS完全>。

#pv-container { 
    position: relative; 
    height: 500px; 
    width: 100%; 
} 
#map-canvas { 
    border: solid thick #ccc; 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
} 
#backscreen { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    border: solid thick red; 
}

您需要首先更改背景的全景位置（pano和pov），然後設置爲地圖 - 畫布div。那時候，你需要改變背景的標題（或者可能是音高）。這會在Google Maps API中產生緩存圖像（我猜）。

function initialize() { 
    var loc = { 
     lat: 38.9002138, 
     lng: -77.0364319 
    }, 
    pov = { 
     heading: 180, 
     pitch: -5 
    }, 
    svService = new google.maps.StreetViewService(), 
    panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map-canvas')), 
    backscreen = new google.maps.StreetViewPanorama(
      document.getElementById('backscreen')), 
    counter = 0; 

    function updatePano(data, status) { 
    if (status === google.maps.StreetViewStatus.OK) { 
     var opts = { 
     pano: data.location.pano, 
     pov: {heading: pov.heading + 120 * (counter % 3), pitch: pov.pitch} 
     }; 
     backscreen.setOptions(opts); 
     backscreen.changed = function(key) { 
     if (key === 'status' && backscreen.get('status') === 'OK') { 
      var opts2 = Object.create(opts); 
      opts2.heading += 5; 
      backscreen.setOptions(opts2); 
      setTimeout(function() { 
       panorama.setOptions(opts); 
      }, 100); 

     } 
     } 
    } else { 
     document.getElementById('err').textContent = "Failed to get panorama"; 
    } 
    counter = (counter + 1) % 15; 
    } 

    setInterval(function() { 
    svService.getPanorama({ 
     location: { 
     lat: loc.lat + (counter * 0.0001), 
     lng: loc.lng 
     }, 
     radius: 35 
    }, updatePano); 
    }, 3000); 

} 

initialize();

你可能有興趣在後臺格會發生什麼。這就是：

來源

2016-03-07 05:53:25 wf9a5m75

哇，我會在本週晚些時候嘗試你的獎金，如果它的工作！謝謝你！ – rescdsk

從@ wf9a5m75答案也不太爲我工作，但它使我在正確的方向，這結束了在Chrome的工作：我更換了一個呼叫

panorama.setOptions({ 
    pano: data.location.pano, 
    pov: mypov 
});

與被強制爲連續兩個電話：

panorama.setPano(pano); 
panorama.changed = function(key) { 
    if (key === 'status') { 
     // Just listen once! 
     panorama.changed = function() {}; 
     panorama.setPov(mypov); 
    } 
};

所以負載需要兩倍長，但至少它看起來並不可怕......

編輯：看起來像這是一個known bug - 似乎你可以使比賽條件不太經常打，但並不真正阻止它。（

來源

2016-03-10 02:56:09 rescdsk

謝謝你的更新。我沒有那被解僱爲已知的bug。 – wf9a5m75

設置StreetViewPanorama的兩個屬性會導致競爭狀態？

回答

相關問題