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"），success / done回调中尚未显示部分地图API

$(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}查询字符串参数（例如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放在一起，把所有丑陋的东西都放到了一个允许Deferred-chaining的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，因为它似乎没有正确加载。

Answer 4

我解决了我的问题，这是因为地图库的脚本标记中有一个错误的href网址：

<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false&key=XXXX" ....

无法启动google.maps.Geocoder

4 个答案:

编辑：