Google地图API v3街景服务中的信息窗口大小错误 [英] Info Window wrong size on Google Maps API v3 Street View Service

问题描述

设置：在同一页面（同一地图画布内），我有2个信息窗口。他们两人的CSS都是一样的。内容非常相似。最初，街景视图pano会打开一个信息窗口。信息窗口内的按钮用于在常规地图和街景视图之间切换。

问题：一个信息窗口正在调整大小以适应内容和另一个不是，所以它显示滚动条。我能看到的唯一区别是一个是在一个普通的旧路线图上，另一个在街景视图全景图中。

我试过了： 我有两个信息窗口的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 /

全屏演示

寻求帮助：这里发生了什么？为什么它们的渲染方式不同，我该如何解决这个问题？

解决方案

使用内联css。

而不是

  .info-window {
 width：250px; 
 height：230px; 
 
  

使用：

  //地图信息窗口
 var contentString ='< div style =width：250px; height：230px;您好，我们是Cuberis< / h3>'+ 
'< table border =0cellpadding =""" info-window>>'+ 
'< h3> 0cellspacing =0class =contact>'+ 
'< tr>'+ 
'< th scope =row> Email：< / th>' + 
'< td> [e-mail]< td>'+ 
'< / tr>'+ 
'< tr>'+ 
'< ; th scope =row>电话：< / th>'+ 
'< td> 919.443.2254< / td>'+ 
'< / tr>'+ 
'< tr>'+ 
'< th scope =row> Office：< / th>'+ 
'< td> Golden Belt  -  Building 2< &
'807 E. Main Street< br />'+ 
'Suite 2-210< b>'+ 
'Durham，NC 27701< / td> '+ 
'< / tr>'+ 
'< / table>'+ 
'< div class =contact>'+ 
'< input type =buttonclass =buttonvalue =查看我们的办公室内部onclick =tog gleStreetView（）;>< / input>'+ 
'< / div>'; 
  

和：

  //街景信息窗口
 var contentString2 ='< div style =width：250px; height：230px;您好，我们是Cuberis< / h3>'+ 
'< table border =0cellpadding =""" info-window>>'+ 
'< h3> 0cellspacing =0class =contact>'+ 
'< tr>'+ 
'< th scope =row> Email：< / th>' + 
'< td> [e-mail]< td>'+ 
'< / tr>'+ 
'< tr>'+ 
'< ; th scope =row>电话：< / th>'+ 
'< td> 919.443.2254< / td>'+ 
'< / tr>'+ 
'< tr>'+ 
'< th scope =row> Office：< / th>'+ 
'< td> Golden Belt  -  Building 2< &
'807 E. Main Street< br />'+ 
'Suite 2-210< b>'+ 
'Durham，NC 27701< / td> '+ 
'< / tr>'+ 
'< / table>'+ 
'< div class =contact>'+ 
'<输入类型=按钮class =buttonvalue =在地图上检查我们onclick =t oggleStreetView（）;>< / input>'+ 
'< / div>'; 
  

The Setup: On the same page (inside the same map canvas), I have 2 info windows. The CSS for both of them is the same. The content is very similar. Initially, the Street View pano loads with an info window open. A button inside the info window is used to toggle between the regular map and Street View. The map has a second info window displayed with a button to go back to Street View.

The Problem: One info window is resizing to fit the content and the other one is not, so it's displaying scroll bars. The only difference I can see is that one is on a regular old road map and the other is on a Street View panorama.

What I've Tried: I have maxWidth for both info windows set to 500 (ridiculously wide) and a set width and height for the inner div of the info window in CSS.

The Code: Here's the CSS:

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

The full JS is long and on jsfiddle.

The Demo: http://jsfiddle.net/rkXuk/1/

full screen demo

A Call for Help: What is going on here? Why are they rendering differently and how can I fix this?

解决方案

Use inline css.

Instead of

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

Use:

// 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>[e-mail]</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>';

And:

// 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>[e-mail]</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>';

这篇关于Google地图API v3街景服务中的信息窗口大小错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！