0

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

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

地图左边缘的大模糊方块是街景小人

我的 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);
4

1 回答 1

0

借助此答案和 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;
}

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

于 2013-10-15T16:29:55.837 回答