Question

我正在使用Google Maps 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时会立即执行。

动态高度jQuery

1 个答案: