Laravel 5.8中Google地图API自动补全功能报错问题

Hey there, let's work through each issue you're hitting and get that autocomplete feature up and running properly!

逐个分析你的错误原因 #

1. 错误：「该API项目未被授权使用此API」 #

这个问题的核心是你的Google Cloud项目没启用Places API，或者API密钥的权限限制配置不对：

• 首先登录Google Cloud控制台，找到「API和服务」→「库」，搜索「Places API」（注意是全称，不是其他类似的API），点击启用它。
• 然后去「API和服务」→「凭据」，找到你的API密钥，编辑它的「应用限制」：选择「HTTP referrers (网站)」，添加你允许访问的域名，比如本地开发的http://localhost:8000/*，生产环境的https://your-domain.com/*，避免密钥被滥用。

2. 错误：「Uncaught (in promise). initMap is not a function」 #

你用的脚本链接指定了callback=initMap，但你根本没定义这个函数啊！而且自动补全功能需要的是initAutocomplete回调，不是initMap（那是初始化地图用的）。这个链接本身就不适合你的需求，直接跳过它就行。

3. 错误：「Uncaught ReferenceError: google is not defined」 #

这个链接是直接请求Place Autocomplete的JSON接口，不是加载Google Maps JavaScript SDK的脚本！它不会在全局生成google对象，所以前端代码自然找不到这个变量。这个方式是给后端调用用的，前端做自动补全必须加载完整的JS SDK。

完整的正确实现步骤 #

1. 确认Google Cloud配置（必做） #

先完成上面第一个错误里的两步：启用Places API，配置API密钥的HTTP referrer限制，这是一切的基础。

2. 在Laravel中正确引入SDK脚本 #

把这个脚本放在footer.blade.php的末尾（确保在你的自定义JS代码之前加载）：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places&callback=initAutocomplete" async defer></script>

• libraries=places：必须加，因为自动补全属于Places库的功能
• callback=initAutocomplete：指定SDK加载完成后要执行的初始化函数

3. 添加HTML搜索框 #

在你需要的页面（比如搜索页的blade模板）添加输入框：

<div class="form-group">
    <label for="location-input">搜索地址</label>
    <input id="location-input" type="text" class="form-control" placeholder="输入地址自动补全">
</div>

4. 编写初始化自动补全的JS代码 #

可以把这段代码放在footer.blade.php的脚本之后，或者写到resources/js/app.js里（记得运行npm run dev编译）：

// 确保这个函数是全局可用的，不要放在闭包里面
function initAutocomplete() {
    // 获取输入框元素
    const locationInput = document.getElementById('location-input');
    if (!locationInput) return; // 防止页面没有这个元素时报错

    // 初始化自动补全实例
    const autocomplete = new google.maps.places.Autocomplete(locationInput, {
        types: ['geocode'], // 可选：只显示地理编码地址，排除商家等
        componentRestrictions: { country: 'cn' } // 可选：限制搜索国家，比如中国填'cn'
    });

    // 可选：当用户选择地址后，获取详细信息
    autocomplete.addListener('place_changed', function() {
        const selectedPlace = autocomplete.getPlace();
        // 这里可以拿到地址的经纬度、详细地址组件等
        console.log('选中地址的纬度:', selectedPlace.geometry.location.lat());
        console.log('选中地址的经度:', selectedPlace.geometry.location.lng());
        // 可以把这些数据存到隐藏输入框，提交表单时一起传给后端
    });
}

额外注意事项 #

• 不要使用无限制的API密钥，一定要配置HTTP referrer限制，否则可能被恶意盗用产生高额账单
• 检查Google Cloud的账单状态，如果账户欠费，API会被暂停使用
• 确保浏览器没有拦截Google的脚本（比如广告拦截插件），可以在开发者工具的「网络」标签里查看脚本是否成功加载
• 如果你的Laravel项目用了Vue或其他框架，要确保initAutocomplete函数在全局作用域，或者在框架的生命周期钩子中初始化自动补全

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