Pegman被模糊了

Question

我正在尝试使用Google Maps Javascript API v3中的StreetViewPanoramio功能，但我无法让街景视图控件正常工作。起初我以为Pegman没有出现，然后我意识到它显示为一个模糊的广场。并且街景视图控件不会显示在地图上。 Map和StreetView都可以正常工作 - 加载并显示正确的位置。我目前正在Chrome中对此进行测试。

我有一张地图和街景全景并排，我试图按照documentation的例子。我知道模糊方块是街景小人，因为我可以抓住它并移动它，它的行为就像街角工作者一样。我在地图上也有一个符合预期的标记。

我的HTML非常简单：

<div class="maps-area">
    <div id="mapCanvas"/>
    <div id="streetViewCanvas"/>
</div>

我的Javascript与示例几乎相同：

//note: center is a valid google.maps.LatLng object.
//Setup the panoramio
var panoOptions = {
  position: center,
  pov: {
    heading: 0,
    pitch: 10
  }
};

var svElement = document.getElementById("streetViewCanvas");
_panorama = new google.maps.StreetViewPanorama(svElement, panoOptions);

//Setup the map
var mapOptions = {
  center: center,
  zoom: 12,
  streetViewControl: true,
  streetView: _panorama,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

_map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

Answer 1

在上面this answer和Dan的评论的帮助下，我能够将问题追溯到max-width：100％样式应用于地图上的图像。

Bootstrap.css为img定义了这种样式：

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

导致了这个问题。我为mapCanvas元素分配了一个map-canvas类，然后创建了这个样式来覆盖Bootstrap的样式：

.map-canvas img{
    max-width: none;
}

并正确渲染街景控件和街景小人。