javascript - Angular $http.post 谷歌地图Javascript API错误

Question

我在使用 Angular JS $http.post() 时遇到 Google Maps Javascript API 问题，在任何其他解释之前，这是错误:

angular.js:13642 
TypeError: Cannot read property 'lat' of undefined
        at _.H.toString (js?key=API_KEY&libraries=places:97)
        at e (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at Object.<anonymous> (jquery.min.js:4)
        at Function.each (jquery.min.js:2)
        at dc (jquery.min.js:4)

发生在这里:
app.js

_sost.validateSost = function(form){
    $http.post(php_data.ajax_url, send_data, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    }).success(function(response){
        var data = response.data;
        _sost._posting = false;
        _sost._postresult = data.status;
        if(data.status == 0){
            _sost._inserted = _completed.length;
        }
    }).then(function () {
        _sost.lista = [{}];
    });
}
_sost.addLocation = function (sost) {
    if (sost.luogo && typeof(sost.luogo) == 'object') {
        var google_location = sost.luogo;
        var location_components = google_location.address_components;
        var location_geometry = google_location.geometry.location;
        if (location_components) {
            location_components.forEach(function (item) {
                var _type = item.types[0];
                if (_type == 'administrative_area_level_1') {
                    sost.regione = item.long_name;
                } else if (_type == 'administrative_area_level_2') {
                    sost.provincia = item.long_name;
                } else if (_type == 'administrative_area_level_3') {
                    sost.comune = item.long_name;
                } else if (_type == 'postal_code') {
                    sost.cap = item.short_name;
                } else if (_type == 'route') {
                    sost.indirizzo = item.long_name;
                } else if (_type == 'country') {
                    sost.nazione = item.long_name;
                }
            });
            if (!sost.hasOwnProperty('cap')) {
                sost.cap = null;
            }
            if (!sost.hasOwnProperty('indirizzo')) {
                sost.indirizzo = null;
            }
            sost.location = google_location.formatted_address;
        }
        if (location_geometry) {
            sost.lat = location_geometry.lat();
            sost.lng = location_geometry.lng();
        }
    }
};

这是HTML部分:

<section id="registra-membro" ng-controller="sostenitori as st">
    <form novalidate method="post" name="st_f" id="add-sostenitori" ng-submit="st.validateSost(st_f)" ng-show="!st._posting">
        ...
        <input type="text" autocomplete="off" ng-change="st.addLocation(sost)" g-places-autocomplete force-selection="true" ng-model="sost.luogo" name="lu_{{$index}}" class="col-2-3" placeholder="Indirizzo" required/>
    </form>
</section>

我正在使用 google.places 模块加载 Google map 的自动完成功能，一切正常，但我无法意识到在使用 $http.post( )，因为没有 Google Maps API 相关函数。

如果您需要更多代码，请询问，这真的变得很奇怪，我正在使用 jQuery 1.12.4 和 AngularJS 1.5.6

更新

我试图在 Google Maps Javascript API 中查找此错误，并且在这里找到了一些内容:

_.H.prototype.toString=function() {
    return"("+this.lat()+", "+this.lng()+")"
}

这实际上是给我错误的部分，但我找不到它在哪里调用这个 _.H.prototype.toString 函数。
H 应该是 geometry.location 部分，它具有诸如 lat 和 lng 之类的方法，用于给出位置坐标

另一个更新

我发现我的 Angular 代码的哪一部分触发了 Google Maps API Javascript 中的该函数，它是这样的:

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
    $httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined) {
            return data;
        }
        console.log($.param(data));
        return data;
    };
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});

$.param(data) 触发了错误，我想这是一个很好的进步:)

Answer 1

经过 1 天的完全卡住，我解决了我的问题。
在 Google Maps API Javascript 内部搜索了几个小时后，我发现问题出在 jQuery 函数上，即 $.param() .
我不知道为什么它触发了错误(前面描述过)，但是更改它消除了我的问题，所以，这就是我所做的。

app.js

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
    $httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined) {
            return data;
        }
        // !! REMOVED $.param(data)
        return data;
    };
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});
// Added $httpParamSerializerJQLike in dependencies
$http.post(php_data.ajax_url, $httpParamSerializerJQLike(send_data), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}).then(function (response) {
    var data = response;
    if (data.hasOwnProperty('status')) {
        _sost._posting = false;
        _sost._postresult = data.status;
        if (data.status == 0) {
            _sost._inserted = _completed.length;
        }
    }
    _sost.lista = [{}];
});

所以，基本上，我用另一个 AngularJS 内置函数替换了 jQuery.param() 函数，发现 here