Question

我已在下面编辑了我的代码并放入了完整的JS。我试图提取给定邮政编码或城市附近的地方列表。我的第一步是获取zipcode或城市名称并获取latlng坐标，然后获取地点列表。我收到以下错误“无法调用未定义的方法'地理编码'＆amp; “无法读取null的属性'offsetWidth'”将非常感谢任何帮助。

    var placesList;
    var geocoder;
    var map;

    function initialize() {
        map = new google.maps.Map(document.getElementById('map'));
        geocoder = new google.maps.Geocoder();
    }

    function getLatLng(address, callback) {
        geocoder.geocode({
            address: address
        }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var location = new google.maps.LatLng(result.lat(), result.lng());                    
                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });
                callback(location);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    getLatLng('14235', function (latLngLocation) {
        var pyrmont = latLngLocation;
        var request = {
            location: pyrmont,
            radius: 5000,
            types: ['park', 'zoo']
        };
        placesList = document.getElementById('places');
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
        var request1 = {
            reference: place.reference
        };
        service.getDetails(request1, createMarkers);

        function callback(results, status, pagination) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                return;
            } else {
                for (var i = 0; i < results.length; i++) {
                    var markerPlace = results[i];
                    createMarkers(markerPlace, status);
                }

                if (pagination.hasNextPage) {
                    var moreButton = document.getElementById('more');
                    moreButton.disabled = false;
                    google.maps.event.addDomListenerOnce(moreButton, 'click',
                        function () {
                            moreButton.disabled = true;
                            pagination.nextPage();
                        });
                }
            }
        }


        function createMarkers(place, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {

                var bounds = new google.maps.LatLngBounds();
                var image = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                };

                var marker = new google.maps.Marker({
                    map: map,
                    icon: image,
                    title: place.name,
                    position: place.geometry.location
                });
                placesList.innerHTML += '<li>' + place.name + '<br>' +
                    (place.formatted_address ? place.formatted_address : place.vicinity) + '</li>';

                bounds.extend(place.geometry.location);
                map.fitBounds(bounds);

            }
        }
    });

    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您的地址不是字符串，而是一个数字：

var address = 14235;

API期望"address" in the GeocoderRequest是一个看起来像邮政地址的字符串。如果你想让它成为一个字符串，请用引号括起来（虽然我不确定你希望地理编码器为一个数字返回什么）：

var address = "14235";

如果你给地理编码器一些看起来更像完整地址的东西，它会更好用。

你也遇到了地理编码器的异步性问题（FAQ），你不能返回异步函数的结果，你需要在回调函数中使用它。

Answer 2

您必须了解的是geocode API是异步的;您正准备在结果变量准备好之前将结果变量分配给pyrmont。要达到你想要的效果，你需要使用回调。另外还有一些其他问题，你如何处理latLng归因。无论如何，我认为你的代码看起来应该是这样的：

var map, geocoder; // global vars

// retain your initialize function
function initialize() {
  map = new google.maps.Map(document.getElementById('map'), options);
  geocoder = new google.maps.Geocoder();
}

// but separate out your code into a new function that accepts an address
// and a callback function.
function getLatLng(address, callback) {
   geocoder.geocode({ address: address }, function (results, status) {
     if (status === google.maps.GeocoderStatus.OK) {

       // assign a new Google latLng object to `location`
       var location = new google.maps.LatLng(result.lat(), result.lng();

       // set the center of the map and position using the latlng object
       map.setCenter(location);
       var marker = new google.maps.Marker({
         map: map,
         position: location;
       });

       // call the callback with the latlng object as a parameter.
       callback(location);
     } else {
       alert('Geocode was not successful for the following reason: ' + status);
     }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

// call the `getLatLng` function with an address and a callback function
getLatLng('14235', function (latLngLocation) {
  var pyrmont = latLngLocation;
});

从名称或邮政编码中获取经度和纬度 - 谷歌API

2 个答案: