javascript - 无法启动 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 map 实际上完全“组装”之前就认为脚本已完成加载。使用 jQuery 的 $.getScript (相当于 $.ajax 和 dataType: "script" 在这里使用)，看起来部分 map API 在 success 中还不可用>/完成 回调。

$(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 map 在完全准备好时负责调用的函数。您可以通过将 callback={yourfunctionname} querystring 参数添加到 URL(例如，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"
    });
});

编辑:

我整理了一个 proof-of-concept jsFiddle将所有丑陋的东西拉入允许延迟链接的 jQuery 扩展方法中。以下是如何使用它的简单示例:

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