谷歌地图街景破损答案

【问题标题】：Google Maps Street view Breakage谷歌地图街景破损
【发布时间】：2015-01-16 13:04:27
【问题描述】：

我们正在为我们的产品使用 Google 街景 Api 第 3 版。第一次加载街景时，我们遇到了一个问题。视图正在分解成碎片/像素，当我们在 Google 地图中看到相同的视图时，它并没有中断，而是想象中的显示了模糊效果。我们如何在我们的产品中也提供相同的模糊效果？` 点击此链接查看破解效果：http://jsfiddle.net/godwinthaya/4wfLkc3t/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var mapOptions = {
    center: fenway,
    zoom: 14
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

//marker
  var busMarker = new google.maps.Marker({
      position: fenway,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });
   var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 34,
      pitch: 10
    }
  };
  var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
    map.setStreetView(fenway);

     panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));


   google.maps.event.addListener(busMarker, 'click', function() {
   alert("Hai");
    infowindow.open(map,busMarker);
  });


}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <!--<div id="map-canvas" style="width: 400px; height: 300px"></div> -->
    <div id="map-canvas" style="position:absolute;  width: 1000px; height: 600px;"></div>
  </body>
</html>

【问题讨论】：

不确定你的意思。你的 jsfiddle 对我来说看起来不错（尽管放大得比我想要的多，而且我没有看到标记）。你使用的是什么浏览器？问题浏览器是特定的吗？
@geocodezip:- 我们附上了 3D 视图中断的图片截图。我们在所有浏览器中都面临这个问题。当我们从一个 PANO 移动到另一个 PANO 时，我们面临着这个问题。而在谷歌地图（新地图和经典地图）中，它会产生模糊效果。我们如何在我们的项目中实现相同的模糊效果？

标签： javascript html google-maps google-maps-api-3 google-street-view

【解决方案1】：

您是否正确调用事件？您所问的内容很可能是 API 的一部分，但没有关于实现“模糊效果”的文档或参考。虽然，如果您正确调用所有事件，它应该为您提供默认行为。以下是不同事件的示例代码：

var cafe = new google.maps.LatLng(37.869085, -122.254775);

function initialize() {

  var panoramaOptions = {
    position: cafe,
    pov: {
      heading: 270,
      pitch: 0
    },
    visible: true
  };
  var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

  google.maps.event.addListener(panorama, 'pano_changed', function() {
      var panoCell = document.getElementById('pano_cell');
      panoCell.innerHTML = panorama.getPano();
  });

  google.maps.event.addListener(panorama, 'links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  google.maps.event.addListener(panorama, 'position_changed', function() {
      var positionCell = document.getElementById('position_cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  google.maps.event.addListener(panorama, 'pov_changed', function() {
      var headingCell = document.getElementById('heading_cell');
      var pitchCell = document.getElementById('pitch_cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

：

【讨论】：