Google Places自动补全与交通图层地图API使用故障咨询

你的核心问题是Google Maps API异步加载时，自动补全的初始化逻辑没有在API完全加载后执行，导致google.maps.places.Autocomplete无法被正确实例化。当你移除callback=initMap时，API改为同步加载，此时自动补全能正常工作，但地图初始化逻辑无法被自动触发（或触发时因坐标为空导致显示异常）。

解决步骤： #

• 移除输入框的onFocus="initialize()"事件，避免在API未加载完成时触发初始化
• 将自动补全的初始化逻辑整合到initMap函数中，确保Places库已加载完成
• 保留API请求中的libraries=places、callback=initMap和API密钥，保证异步加载时地图和自动补全能同时正常初始化

修改后的完整代码： #

<style> 
#map { height: 500px; } 
</style> 

<form action="" method="post"> 
  <input type="text" name="location" id="autocomplete"> 
  <input type="submit" name="submit" > 
</form> 

<div id="map"></div><!--Traffic Map--> 

<?php 
$lat = ''; 
$long = ''; 
if(isset($_POST['submit'])) { 
  $address = urlencode($_POST['location']); 
  $url = "http://maps.googleapis.com/maps/api/geocode/json?address=$address"; 
  $geocode = file_get_contents($url); 
  $output = json_decode($geocode); 
  if ($output->status == "OK") { 
    $lat = $output->results[0]->geometry->location->lat; 
    $long = $output->results[0]->geometry->location->lng; 
  } else{ 
    echo $output->status; 
  } 
} 
?> 

<script>
// 自动补全初始化函数
function initializeAutocomplete() {
  const autocomplete = new google.maps.places.Autocomplete(
    document.getElementById('autocomplete'), 
    { types: ['geocode'] }
  );
  
  // 可选：监听地点选择事件
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    const place = autocomplete.getPlace();
    // 这里可以添加地点选择后的逻辑，比如获取坐标等
  });
}

// 地图初始化函数
function initMap() {
  // 先初始化自动补全，确保Places库已加载
  initializeAutocomplete();
  
  // 设置地图默认中心（首次加载无地址时显示的默认位置）
  let mapCenter = new google.maps.LatLng(37.7749, -122.4194); // 示例：旧金山坐标
  if ('<?php echo $lat; ?>' !== '' && '<?php echo $long; ?>' !== '') {
    mapCenter = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $long; ?>);
  }
  
  const mapOptions = {
    center: mapCenter,
    zoom: 12,
    scrollwheel: true,
    draggable: true,
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true,
  };
  
  const map = new google.maps.Map(document.getElementById('map'), mapOptions);
  const trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
  
  // 只有当有有效坐标时才添加标记
  if ('<?php echo $lat; ?>' !== '' && '<?php echo $long; ?>' !== '') {
    const marker = new google.maps.Marker({
      position: {lat: <?php echo $lat; ?>, lng: <?php echo $long; ?>},
      map: map,
      animation: google.maps.Animation.DROP,
    });
  }
}
</script> 

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap"></script>

额外优化说明： #

1. 增加了默认地图中心，避免首次加载页面时因lat和long为空导致地图显示异常
2. 仅在存在有效坐标时创建地图标记，防止出现无效标记
3. 将自动补全逻辑封装为独立函数，代码结构更清晰
4. 保留了地点选择事件的监听逻辑，方便后续扩展功能

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