如何在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顯示與文本垂直對齊？

回答

相關問題