如何从Google Maps获取经纬度？点击按钮显示经纬度代码故障排查

阿华AIGC实验室

2026-5-27

解决地址转经纬度弹窗无响应的问题

我来帮你排查下代码里的问题，主要有两个核心点导致功能失效：

问题1：DOM加载顺序问题

你的jQuery点击事件绑定代码在<head>里执行时，页面的<body>还没完成渲染，此时$("#btn")根本找不到按钮元素，事件自然绑定失败。

问题2：Google Maps API调用限制

现在Google Maps Geocoding API要求必须传入有效的API密钥才能正常请求，不带密钥的请求大概率会被拒绝（返回OVER_QUERY_LIMIT或REQUEST_DENIED状态）。另外你的代码里是固定查询迈阿密的地址，没有实现“用户输入街道地址”的需求，这点我也帮你补上了。

修正后的完整代码

<html>
<head>
    <!-- 替换成你自己的Google Maps API密钥 -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        // 等待DOM完全加载后再绑定事件
        $(document).ready(function() {
            $("#btn").click(function() {
                // 获取用户输入的地址
                var userAddress = $("#address-input").val().trim();
                if (!userAddress) {
                    alert("请输入要查询的地址！");
                    return;
                }

                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'address': userAddress }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var lat = results[0].geometry.location.lat();
                        var lng = results[0].geometry.location.lng();
                        alert("坐标：纬度 " + lat + "，经度 " + lng);
                    } else {
                        alert("查询失败：" + status);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="address-input" type="text" placeholder="请输入街道地址" />
    <input id="btn" type="button" value="查询坐标" />
</body>
</html>