javascript - 街景 View 在加载时在街道图像上提供带有海军按钮的黑框

Question

我正在使用 React 将街景加载到我得到的组件中:

正如我们所看到的 - map 组件加载得很好，街景组件似乎也加载得很好，只是它后面的图像(实际的街景)没有加载。

报告的错误是:

**

Uncaught TypeError: Cannot read property 'toString' of undefined in maps.googleapis.com/imagery_viewer.js:299

**

当我在直接 HTML 中运行类似的代码时，这有效......有时......经常我没有返回图像

我已将代码隔离到一个由大型 setTimeout() 调用触发的特殊函数中，这样文档加载时间就不会受到影响。事实上，使用监视和断点，我们可以看到 DIV 已在运行时加载并可访问。

 handleLoad: -> 
    options = {
      addressControl: true
      fullscreenControl: true
      panControl: true  
      pov: this.props.image.pov  
      visible: true  
      zoomControl: true
    }
    if this.props.image.pano  
      options.pano = this.props.image.pano  
    else if this.props.image.position
      options.position = new google.maps.LatLng this.props.image.position[0], this.props.image.position[1]

    if this.props.image.position
      pos = new google.maps.LatLng this.props.image.position[0], this.props.image.position[1]  
    else   
      pos = {lat: this.props.entryLatitude, lng: this.props.entryLongitude};

    options.key   ='XXXX - GOOGLE MAP API KEY GOES HERE - XXXX';
    this.map      = new google.maps.Map(this.mapDiv, {  center: pos,  zoom: 14, visible:true } , streetViewControl: false);
    this.panorama = new google.maps.StreetViewPanorama this.panoramaDiv, options;
    this.map.setStreetView(this.panorama);    

有什么建议可能导致此问题吗？

Answer 1

这个已知的黑色街景全景问题可能与缓存或 Cors 相关。我建议你首先尝试排除这两种情况。例如。请参阅https://support.google.com/maps/thread/6166296?msgid=8836199

这也可能是由于第三方库错误或冲突造成的。例如。如果您正在使用 mootools 或prototype.js，请查看这些线程:
Mootools breaks Google maps streetview - black screen
https://issuetracker.google.com/issues/139252493

另一个潜在的原因可能是您的纬度/经度距离提供街景图像的道路很远。看看相关问题的这个很好的答案 Google map JS API "StreetViewPanorama" display black screen for some address

请告诉我们任何链接的解决方案是否适合您；否则，请提供能够重现该问题的codesandbox或stackblitz，我将很乐意进一步调查。