设置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的两个属性会导致竞争状态？

回答

相关问题