Question

我试图避免在这里提出这个问题并且我已经搜索并搜索了一个解决方案，但最终对我目前的问题没有运气。我目前有两个输入文本字段，它们有两个不同的位置，然后在Google地图上显示。好吧，我能够做到这一点，但后来我希望地图在点击一个按钮之后从顶部向下滑动，但现在地图的高度略大于其原始容器，并且但是，如果我再次单击同一个按钮而不刷新页面，则地图会重置到其容器中并显示没有其他麻烦的路径。

注意：在再次按下显示按钮之前，地图上有各种调整大小的问题，可以在这张照片中看到：

根据我的理解，我需要打电话

google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）;

但我个人认为，在地图有时间加载之前，我在错误的地方调用它。我不完全确定还有什么要做，所以任何帮助都表示赞赏。

我的Javascript / jQuery（显示地图并尝试调整大小位于最底层）：

var source, destination;
var directionsDisplay;
var map;
var directionsService = new google.maps.DirectionsService();

google.maps.event.addDomListener(window, 'load', function() {
  new google.maps.places.SearchBox(document.getElementById('address1'));
  new google.maps.places.SearchBox(document.getElementById('address2'));
  directionsDisplay = new google.maps.DirectionsRenderer({
    'draggable': true
  });
});

function GetRoute() {
  var mumbai = new google.maps.LatLng(18.9750, 72.8258);
  var mapOptions = {
    zoom: 3,
    center: mumbai,
    styles: [{
      stylers: [{
        saturation: -100
      }]
    }]
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  directionsDisplay.setMap(map);

  //*********DIRECTIONS AND ROUTE**********************//
  source = document.getElementById("address1").value;
  destination = document.getElementById("address2").value;

  var request = {
    origin: source,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

  //*********DISTANCE AND DURATION**********************//
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [source],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
      var distance = response.rows[0].elements[0].distance.text;
      var duration = response.rows[0].elements[0].duration.text;
      var dvMiles = document.getElementById("miles");
      var dvTime = document.getElementById("time");
      dvMiles.innerHTML += "Distance: " + "<br />" + distance;
      dvTime.innerHTML += "";
      dvTime.innerHTML += "Duration: " + duration;

    } else {
      alert("Unable to find the distance via road.");
    }
  });
}

$("#slide").click(function() {
  $("#dvMap").slideDown("slow", function() {
    document.getElementById('dvMap').style.display = "visible";
    google.maps.event.trigger(map, 'resize');
  });
});

这应该是它的样子：

编辑：

HTML：

<div id="dvMap">

</div>

CSS：

#dvMap {
  width: 100%;
  height: 300px;
  margin-top: 48px;
  display: none;
}

Answer 1

我最终弄清楚出了什么问题。所以我的HTML中有一个空div但是div需要放在另一个div容器中，如下所示：

<div id="dv">
  <div id="dvMap">

  </div>
</div>

它与我的JS没什么关系，但你必须改变JS中的id名称：

$("#slide").click(function() {
  $("#dv").slideDown("slow", function() {
    document.getElementById('dv').style.display = "block";
  });
});

无法通过隐藏的Div重新调整Google地图的大小

1 个答案: