Google Map API - 模态框内地图使用Directions Service时无法自动缩放

这个问题我之前也踩过坑，核心原因很明确：模态框默认是隐藏状态，当地图初始化时，direction_canvas容器的实际尺寸是无效的（比如宽高为0），导致Google Maps没法正确计算路线的边界范围，自然就没法自动缩放到合适的视图了。下面给你两个可行的解决方案：

方案1：延迟地图初始化到模态框显示后 #

别在document.ready时直接初始化地图，等模态框完全显示完成（包括动画结束）后再执行初始化逻辑。以Bootstrap模态框为例：

// 监听模态框显示完成的事件
$('#your-modal-id').on('shown.bs.modal', function() {
  initialize_direction();
});

function initialize_direction() {
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var direction_map;
  directionDisplay = new google.maps.DirectionsRenderer();
  
  var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  
  // 此时模态框已显示，容器尺寸有效，地图初始化能正常获取尺寸
  direction_map = new google.maps.Map(document.getElementById("direction_canvas"), myOptions);
  directionDisplay.setMap(direction_map);
  
  // 发起路线请求（替换成你的实际起点/终点经纬度）
  var routeRequest = {
    origin: new google.maps.LatLng(37.7749, -122.4194),
    destination: new google.maps.LatLng(34.0522, -118.2437),
    travelMode: google.maps.TravelMode.DRIVING
  };
  
  directionsService.route(routeRequest, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionDisplay.setDirections(response);
      // 手动触发一次边界适配，确保缩放精准
      direction_map.fitBounds(response.routes[0].bounds);
    }
  });
}

方案2：地图已提前初始化？触发resize事件补全 #

如果因为业务需求必须提前初始化地图，那在模态框显示后，需要告诉Google Maps容器尺寸发生了变化，再重新适配路线边界：

// 全局保存地图实例，避免重复初始化
let direction_map = null;
let directionDisplay = null;

$(document).ready(function(){
  // 提前初始化地图（此时模态框隐藏，地图尺寸暂时无效）
  initialize_direction();
});

function initialize_direction() {
  var directionsService = new google.maps.DirectionsService();
  directionDisplay = new google.maps.DirectionsRenderer();
  
  var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  
  direction_map = new google.maps.Map(document.getElementById("direction_canvas"), myOptions);
  directionDisplay.setMap(direction_map);
}

// 监听模态框显示完成事件
$('#your-modal-id').on('shown.bs.modal', function() {
  // 触发地图resize事件，让地图重新计算容器的真实尺寸
  google.maps.event.trigger(direction_map, 'resize');
  
  // 如果已经有路线数据，重新适配到路线边界
  const directions = directionDisplay.getDirections();
  if (directions && directions.routes.length > 0) {
    direction_map.fitBounds(directions.routes[0].bounds);
  }
});

关键提醒 #

• 不管用哪种方案，一定要在模态框完全显示后处理地图的尺寸或缩放逻辑，否则容器尺寸还是无效的
• 如果你的模态框不是Bootstrap的，找到对应的「显示完成」回调（比如自定义模态框的onShowEnd之类的事件）
• 尽量避免重复初始化地图，用全局变量判断实例是否存在即可

内容的提问来源于stack exchange，提问作者Tri Nguyen