0

我整天都在这里寻找可能的帮助，只是一个基本的 noob 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>
4

1 回答 1

0

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

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

要解决这个问题，只需在回调函数中移动任何需要使用results(and/or 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");）。当我看到 nameListingLatLong时，我希望它是一个构造函数，但它不是，所以我会建议listingLatLong改用。）

于 2013-04-02T19:21:00.663 回答