Javascript范围和地理编码[重复]

Question

我整天都在这里寻找可能的帮助，只是一个基本的菜鸟 javascript 错误。

我正在尝试使用谷歌的地理编码器从地址中获取纬度/经度。但是，我似乎无法将它分配给全局，甚至无法从对象的属性（我更喜欢）派生它。基本上我现在只需要从地理编码器中获取位置，其他一切都应该到位。见代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

<script>
    var geocoder = new google.maps.Geocoder();
    var ListingAddress = '1600 Pennsylvania Ave NW  Washington, DC 20500';
    var map;
    var infowindow;

    //var ListingLoc = new google.maps.LatLng(-33.8665433, 151.1956316);
    var ListingLatLong;
    var ListingLoc;

    function initialize() {



        geocoder.geocode({
                address: ListingAddress
                },
                function(results){
                    ListingLatLong = results[0].geometry.location;
                    ListingLoc = new google.maps.LatLng(ListingLatLong);
                });

        map = new google.maps.Map(document.getElementById('map_canvas'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: ListingLoc,
            zoom: 15
        });

        var request = {
            location: ListingLoc,
            radius: 500,
            types: ['school']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    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);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

和标记

<div id="map_canvas" style="width:600px;height:400px;border:none;"></div>

Answer 1

geocoder.geocode 的第二个参数是一个回调函数，它异步执行。这意味着该函数将在您的代码的其余部分之后运行。因此，ListingLatLong 在您尝试使用它之前不会被赋值。

异步执行是在 JavaScript 中执行网络请求的规范。您无需长时间等待网络往返而导致代码挂起，您只需分派一个请求并定义一个侦听器函数，以便在请求稍后完成时触发。这就是这里发生的事情：geocoder.geocode 的函数参数是一个侦听器函数，一旦数据从 Google 的地理编码服务器到达，就会触发。 geocoder.geocode 并没有运行那个函数，确切地说——它只是说，“好的，JavaScript，这是一个你应该在我的请求完成时运行的函数。”

要解决这个问题，只需将任何需要使用results（和/或ListingLatLong）值的代码移动到内部回调函数中：

    geocoder.geocode({
        address: ListingAddress
        },
        function(results){
            ListingLatLong = results[0].geometry.location;
            ListingLoc = new google.maps.LatLng(ListingLatLong);

            // ** note this is inside the callback now **
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: ListingLoc,
                zoom: 15
            });

            // add the rest of your code here, too
            // ...
        });

（旁注：您应该只对构造函数使用大写变量名（例如，var Person = function(name) { this.name = name; }），而对实例使用小写变量名（例如，someGuy = new Person("Bob");）。当我看到名称 ListingLatLong 时，我希望它是构造函数，但不是，所以我建议改用listingLatLong。）