Question

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

Answer 1

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

异步执行是在JavaScript中执行网络请求的标准。您可以直接调度请求并定义一个侦听器函数，以便在请求稍后完成时触发，而不是通过等待很长时间进行网络往返来导致代码挂起。这就是这里发生的事情：geocoder.geocode的函数参数是一个侦听器函数，一旦数据从Google的地理编码服务器到达就会触发。 results没有完全运行该功能 - 它只是说，“好的，JavaScript，这是我应该在请求完成时运行的函数。”

要解决此问题，只需移动任何需要使用<{1}}（和/或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");）。当我看到名称{{1}时我希望它是一个构造函数，但它不是，所以我建议改用ListingLatLong。）

Javascript Scope＆amp;地理编码

1 个答案: