动态高度 jQuery

Question

我正在使用 Google 地图 API 来拉回带有一系列点的地图。我还拉回了 ID="directionsPanel" 元素中显示的方向。这一切都很好，除了当我们超过一定数量的点（Firefox 中为 3，Chrome 中为 4）时，它们会溢出页面。

我使用以下 jQuery 代码来检测元素高度是多少（大概是在加载方向之后），然后进行相应调整：

$(document).ready(function() {
  if($.browser.mozilla)
  {
    var sHeight = $("#directionsPanel").height();
    sHeight = (sHeight * 1.5);
    $("#directionsPanel").height(sHeight);
  }
  else
  {
    // do stuff for other browsers
  }

});

不幸的是，元素没有调整到正确的高度（也许它没有检测到正确的初始高度？ ）并且事情仍然从页面上溢出。关于如何使其更加稳健有什么想法吗？

Answer 1

Google Maps API 可能允许您指定地图加载时的回调函数，这就是您应该放置代码的位置。

例如：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
    //YOUR CODE FOR RESIZING HERE
  });
}
<div>
<b>Mode of Travel: </b>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
</select>
</div>

不要使用 $(document).ready() 因为它会在 DOM 加载时立即执行。