无法启动google.maps.Geocoder

Question

我不明白为什么,但是当我尝试初始化google.maps.Geocoder时,我收到此错误.

这是错误:

Uncaught TypeError: undefined is not a function

和代码:

function updateMapPosition(map){
    var geocoder = new google.maps.Geocoder(); //crashes here !!
    var position = geocoder.geocode( {'address':$('#id_address').val()},
        function(results,status){
            if(status == google.maps.GeocoderStatus.OK){
                if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({map:map, position:results[0].geometry.location});
                }
                else{
                    alert("hop")
                }
            }
        }
    )
}

Answer 1

由于您似乎正在使用类似jQuery的东西,因此您可能会遇到与jQuery认为脚本加载完成之前相同的问题,然后才能完全"组装"Google地图.使用jQuery的$.getScript(相当于$.ajax与dataType: "script"这里使用),它出现在地图API的部分尚未实施的可用success/ done回调.

$(function() {
    var doSomethingMapRelatedInvolvingJQuery = function(geocoder, map) { ... };

    $.ajax({
        url: "https://maps.googleapis.com/maps/api/js?v=3&sensor=false",
        dataType: "script"
    }).done(function() {
        var geocoder = new google.maps.Geocoder(), // ERROR!
            activityMap = new google.maps.Map($("#map_canvas")[0], {
                center: new google.maps.LatLng(0, 0),
                zoom: 0,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            });

        doSomethingMapRelatedInvolvingJQuery(geocoder, map);
    });
});

出于某种原因,尽管jQuery表示已经通过执行回调已经执行了脚本,但Google Maps API的部分内容尚未可用(可能是在第一个文件执行后Google的其他异步内容).

我能找到的唯一解决方案是声明一个全局变量名称,以保存Google Maps在完全准备就绪时负责调用的函数.您可以通过向callback={yourfunctionname}URL 添加querystring参数来为其提供控制(例如,https://maps.googleapis.com/maps/api/js?v=3&callback=googleMapsCallback&sensor=false).这不是最漂亮的解决方案,但它确实有效.

var googleMapsCallback;
$(function() {
    var doSomethingMapRelatedInvolvingJQuery= function(geocoder, map) { ... };

    googleMapsCallback = function() {
        var geocoder = new google.maps.Geocoder(), // Works when google makes the call.
            activityMap = new google.maps.Map($("#map_canvas")[0], {
                center: new google.maps.LatLng(0, 0),
                zoom: 0,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            });

        doSomethingMapRelatedInvolvingJQuery(geocoder, map);
    };
    $.ajax({
        url: "https://maps.googleapis.com/maps/api/js?v=3&callback=googleMapsCallback&sensor=false",
        dataType: "script"
    });
});

编辑:

我把一个概念验证jsFiddle放在一起,将所有丑陋的东西都放到一个允许延迟链接的jQuery扩展方法中.以下是如何使用它的快速示例:

$.loadGoogleMaps().done(function () {
    var geocoder = new google.maps.Geocoder();
    // ... do stuff with your geocoder here ...
});

Answer 2

如果您使用Google AJAX API Loader加载Google Maps API,则必须明确指定您的应用是否使用传感器,否则您将无法获得Geocoder对象.

google.load('maps','3.6',{other_params:'sensor=false'});

Answer 3

在我看来，Geocoder没有定义，因此出现错误Undefined is not a function。但是，已定义，否则您会收到一个错误，表明它在解决google.maps之前未定义。Geocoder

您需要检查如何加载 Map API，因为它似乎没有正确加载。