谷歌地图API V3的街景服务信息窗口大小错误(Info Window wrong size on

2019-10-18 17:46发布

该设置:在同一页上(同一地图画布里面),我有2个信息窗口。 对他们俩的CSS是一样的。 内容非常相似。 最初,街景服务全景图与负载的信息窗口打开。 信息窗口内部的按钮用于常规地图和街景视图之间切换。 该地图有一个按钮,返回到街景视图显示的第二信息窗口。

存在的问题:一是信息窗口调整大小以适应内容,另一种是没有,所以它的显示滚动条。 我能看到的唯一区别是,一个是普通的旧路线图上,另一个是在街景视图全景。

我已经试过:我有maxWidth已设置为500(宽可笑)两种信息窗口,并在CSS信息窗口内DIV一组宽度和高度。

验证码:这里的CSS:

#map-canvas{
  height: 600px;
  width: 1000px;
}
#map-canvas .info-window {
  width: 250px;
  height: 230px;
}

全JS长亮的jsfiddle。

演示: http://jsfiddle.net/rkXuk/1/

全屏演示

一种用于帮助召唤:这到底是怎么回事? 他们为什么渲染不同,我该如何解决这一问题?

Answer 1:

使用内联CSS。

代替

.info-window {
    width: 250px;
    height: 230px;
}

采用:

// map info window
var contentString = '<div style="width:250px; height:230px;" class="info-window">' +
    '<h3>Hi, we\'re Cuberis</h3>' +
    '<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
    '<tr>' +
    '<th scope="row">Email:</th>' +
    '<td>info@cuberis.com</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Phone:</th>' +
    '<td>919.443.2254</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Office:</th>' +
    '<td>Golden Belt - Building 2<br />' +
    '807 E. Main Street<br />' +
    'Suite 2-210<br />' +
    'Durham, NC 27701</td>' +
    '</tr>' +
    '</table>' +
    '<div class="contact">' +
    '<input type="button" class="button" value="See inside our office" onclick="toggleStreetView();"></input>' +
    '</div>';

和:

// street view info window
var contentString2 = '<div style="width:250px; height:230px;" class="info-window">' +
    '<h3>Hi, we\'re Cuberis</h3>' +
    '<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
    '<tr>' +
    '<th scope="row">Email:</th>' +
    '<td>info@cuberis.com</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Phone:</th>' +
    '<td>919.443.2254</td>' +
    '</tr>' +
    '<tr>' +
    '<th scope="row">Office:</th>' +
    '<td>Golden Belt - Building 2<br />' +
    '807 E. Main Street<br />' +
    'Suite 2-210<br />' +
    'Durham, NC 27701</td>' +
    '</tr>' +
    '</table>' +
    '<div class="contact">' +
    '<input type="button" class="button" value="Check us out on the map" onclick="toggleStreetView();"></input>' +
    '</div>';


文章来源: Info Window wrong size on Google Maps API v3 Street View Service