如何在infowindow中将Google StreetView显示与文本垂直对齐？

由于CSS的vertical-align: middle奇怪，这是不必要的困难。我明白了（虽然违背直觉的），如果你想要垂直居中文本图像旁边，你必须这样做的形象和不文...

看来，这种方法仅适用当文本在span容器中时，图像由img标签定义，并且它们均位于div容器内。

这就是说，我在Google地图中有一个infowindow，其中包含Google StreetView显示左侧的地址（文本）（图像？）。但是，街景对象不是img标签，而是span容器。

下面是相关的代码：
如何在infowindow中将Google StreetView显示与文本垂直对齐？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>address and street-view inside an infowindow</title> 

     <style type = "text/css"> 
      * 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      html, body 
      { 
       height: 100%; 
      } 

      #map_canvas 
      { 
       min-height: 100%; 
      } 

      /* inside infowindow */ 
      #userAddress 
      { 
       float: left; 
      } 
      #street_canvas 
      { 
       float: right; 

       width: 100px; 
       height: 100px; 

       vertical-align: middle; 
      } 
     </style> 
    </head> 
    <body> 

     <!-- map here --> 
     <div id = "map_canvas"></div> 

     <!-- Google Maps API --> 
     <script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?&amp;sensor=true&amp;v=3.9"></script> 

     <script type = "text/javascript"> 

      var map; 
      initialize(); 

      function initialize() 
      { 
       var mapOptions = 
       { 
        center: new google.maps.LatLng(37.09024, -95.712891), // coordinates for center of the United States 
        zoom: 4, // smaller number --> zoom out 
        mapTypeId: google.maps.MapTypeId.TERRAIN // ROADMAP, SATELLITE, TERRAIN, or HYBRID 
       }; 

       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

      } // end of initialize 

      var coordinates = new google.maps.LatLng(37.414341, -122.07692159999999); 
      var address = "1401 North Shoreline Boulevard Mountain View, CA 94043"; 
      setMarker(coordinates, address); 

      function setMarker(userCoordinates, userAddress) 
      { 
       var panorama = null; 

       // user address map marker created here 
       var marker = new google.maps.Marker(
       { 
        map: map, // from the global variable 
        position: userCoordinates 
       }); 

       // infowindow created here 
       var windowInfo = "<div>" + 
            "<span id = 'userAddress'>" + userAddress + "</span>" + 
             "<span id = 'street_canvas'></span>" + 
           "</div>"; 

       var infoWindow = new google.maps.InfoWindow(
       { 
        content: windowInfo 
       }); 

        function setStreetView(infoWindow, userCoordinates) 
        { 
         google.maps.event.addListener(infoWindow, "domready", function() 
         { 
          if(panorama !== null) 
          { 
           panorama.unbind("position"); 
           panorama.setVisible(false); 
          } 

          // options for streetview inside map marker 
          var panoramaOptions = 
          { 
           position: userCoordinates, 
           pov: 
           { 
            heading: 45, // northwest in degrees 
            zoom: 1, 
            pitch: 1 // 0 degrees is level 
           }, 

           // removing all map controls 
           addressControl: false, 
           clickToGo: false, 
           enableCloseButton: false, 
           imageDateControl: false, 
           linksControl: false, 
           panControl: false, 
           scrollwheel: false, 
           zoomControl: false, 

           disableDoubleClickZoom: true 
          }; 

          // initializing streetview and settings to global variable 
          panorama = new google.maps.StreetViewPanorama(document.getElementById("street_canvas"), panoramaOptions); 
          panorama.bindTo("position", marker); 
          panorama.setVisible(true); 

         }); 
        } // end of setStreetView 

       setStreetView(infoWindow, userCoordinates); 

       // event listener for infowindow of map marker, onclick 
       google.maps.event.addListener(marker, "click", function() 
       { 
        infoWindow.open(map, this); 
        map.panTo(this.position); 
       }); 

       // event listener for closing infowindow of map marker 
       google.maps.event.addListener(infoWindow, "closeclick", function() 
       { 
        // disable streetview, with the global variable 
        panorama.unbind("position"); 
        panorama.setVisible(false); 
        panorama = null; 
       }); 
      } // end of setMarker 
     </script> 
    </body> 
</html>

有关将街景显示信息窗口内部的参考见this。

来源

2012-12-20 Ian Campbell

所以，它比我想象的要容易得多 - 必须在文本的CSS中设置line-height属性，等于streetview div指定的高度。就是这样，文本然后选择“垂直居中”：

/* inside the infowindow */ 
#userAddress 
{ 
    float: left; 

    line-height: 100px; 
} 
#street_canvas 
{ 
    float: right; 

    width: 100px; 
    height: 100px; 
}

有在这种情况下没有必要vertical-align: middle。

来源

2012-12-22 19:46:05

如何在infowindow中将Google StreetView显示与文本垂直对齐？

回答

相关问题