使用Google Maps API实现城市名称自动补全失败，求问题排查

我来帮你一步步梳理这个问题哈，先从你给出的代码片段和常见的坑开始排查：

1. 核心代码未完成 #

你代码里的var autocomplete = new ...明显没写完，创建自动补全实例的核心代码应该是new google.maps.places.Autocomplete(input, options);，这步没写全的话功能肯定跑不起来。

2. 缺少API密钥（当前强制要求） #

现在Google Maps Places API已经强制要求使用API密钥了，你原来的<script>引用没有带key参数，请求会直接被拒绝。修改后的引用应该是这样：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places" type="text/javascript"></script>

注意：要先在Google Cloud控制台启用Places API，生成有效的API密钥，同时配置好权限和基础计费（有免费额度可用）。

3. 初始化函数未触发 #

你写了initialize()函数，但如果没在页面加载时调用它，代码也不会生效。可以用两种方式触发：

• 在<body>标签添加onload="initialize()"
• 用DOM加载事件监听（更推荐）：

document.addEventListener('DOMContentLoaded', function() {
  initialize();
});

4. 确认输入元素存在 #

要确保页面里有ID为searchTextField的输入框，比如：

<input id="searchTextField" type="text" placeholder="输入美国城市名称">

修复后的完整代码示例 #

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places" type="text/javascript"></script>
  <script type="text/javascript">
    function initialize() {
      var options = {
        types: ['(cities)'],
        componentRestrictions: {country: "us"}
      };
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input, options);
    }
    // 页面加载完成后自动初始化
    document.addEventListener('DOMContentLoaded', initialize);
  </script>
</head>
<body>
  <input id="searchTextField" type="text" placeholder="输入美国城市名称">
</body>

额外排查小技巧 #

打开浏览器控制台（按F12），查看是否有报错信息：比如API密钥无效、Places API未启用、跨域限制等，这些报错会直接告诉你问题根源。

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