已获取当前经纬度，如何传入Google Places API？（附问题代码）

阿华AIGC实验室

2026-5-15

问题分析与解决方案

我来帮你梳理下问题根源，主要是两个核心问题：变量作用域限制和异步执行顺序冲突，咱们一步步修复：

问题1：变量作用域问题

你在success函数里用var声明的lat1和lng1是局部变量，只能在success函数内部访问，外面的initMap函数根本拿不到这两个值，自然没法传给Google Places API。

问题2：异步执行顺序问题

Google Maps脚本加载完成后会立刻调用initMap，但地理定位是异步操作（需要等待浏览器获取位置），大概率initMap执行时，success还没拿到坐标，导致pyrmont对象里的lat和lng都是undefined。

修复后的完整代码

<!DOCTYPE html> 
<html> 
<head> 
    <title>Place searches</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
        #map { height: 100%; } 
        html, body { height: 100%; margin: 0; padding: 0; } 
    </style> 
    <script type="text/javascript">
        // 1. 把坐标变量声明在全局作用域，让所有函数都能访问
        var lat1, lng1;

        function initGeolocation() {
            if( navigator.geolocation ) {
                navigator.geolocation.getCurrentPosition( success, fail );
            } else {
                alert("Sorry, your browser does not support geolocation services.");
            }
        }

        function success(position) {
            lng1 = position.coords.longitude;
            lat1 = position.coords.latitude;
            // 2. 拿到坐标后再手动初始化地图，确保顺序正确
            initMap();
        }

        function fail() {
            alert("无法获取当前位置，无法加载附近商铺");
        }

        var map;
        var infowindow;

        function initMap() {
            var pyrmont = {lat: lat1, lng: lng1};
            map = new google.maps.Map(document.getElementById('map'), {
                center: pyrmont,
                zoom: 15
            });
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                location: pyrmont,
                radius: 500,
                type: ['store']
            }, callback);
        }

        function callback(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            } else {
                // 可选：添加状态错误提示
                alert("获取附近商铺失败：" + status);
            }
        }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }
    </script> 
</head> 
<body onLoad="initGeolocation();"> 
    <div id="map"></div>
    <!-- 3. 去掉script标签里的callback=initMap，避免自动触发 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFvTqvbyut42xc-nF2kToD0Mzwh-_nVvw&libraries=places" async defer></script> 
</body> 
</html>