Javascript Google Map API v3-超过最大调用堆栈大小

在过去的5到6周里，我一直在开发一个JS小部件。其想法是，只需在remote.js文件中添加一个href，以及一个包含小部件内容的具有给定ID的DIV容器，就可以将其添加到任何站点

该小部件广泛使用Google Map API，我引用它如下：

https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,places&callback=initializeGoogleMaps

加载小部件时，它将请求用户允许检查其位置，然后执行其他操作，其中包括对位置进行简单的地理编码，以便在地图上绘制标记

一切都很完美，我一定在开发过程中测试了2000多次搜索

我昨天部署了这个小部件，并成功地将它嵌入了一个主机网站——一切都像往常一样完美。然而，今天早上，我的小部件因Chrome的控制台报告而崩溃：

自从这个小部件上次运行以来，我的代码和主机都没有做任何更改，所以我怀疑GoogleAPI有问题

嵌入到虚拟主机中的我的小部件示例可以在以下位置看到：

http://pcl.solsticecloud.co.uk

我花了几个小时试图弄清这件事的真相，但我还是不明白

任何帮助或建议都将不胜感激

提前谢谢大家,

---

Matt

我已经找到了此问题的原因并进行了修复

我使用了以下代码：

        address = document.getElementById("strSearch").value;

    geocoder.geocode({ 'address': address, componentRestrictions: { country: 'GB' } }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            toggleModal();

            deleteMarkers();
            deleteBanks();

            searchSourceLatLng = new google.maps.LatLng(results[0].geometry.location.k, results[0].geometry.location.B);
            setSearchPointPostcode(results, buildResults);
        }

        else {
            callback();
        }
    })

导致问题的特定行是：

searchSourceLatLng = new google.maps.LatLng(results[0].geometry.location.k, results[0].geometry.location.B);

.B已经工作了几个星期，但现在它似乎不再是有效的财产。相反，.D可以工作，因此我的代码现在可以工作了

由于属性不再有效，我有一个具有null值的LatLng对象，这导致当我试图查看地图边界时地图崩溃

我很想知道API中如何或为什么会发生变化

还有，我肯定这是个愚蠢的问题，但为什么是.k和.D？液化天然气和Lat有什么问题

---

很高兴它被排序了，希望API不会再次更改。

我已经找到了这个问题的原因并进行了修复

我使用了以下代码：

        address = document.getElementById("strSearch").value;

    geocoder.geocode({ 'address': address, componentRestrictions: { country: 'GB' } }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            toggleModal();

            deleteMarkers();
            deleteBanks();

            searchSourceLatLng = new google.maps.LatLng(results[0].geometry.location.k, results[0].geometry.location.B);
            setSearchPointPostcode(results, buildResults);
        }

        else {
            callback();
        }
    })

导致问题的特定行是：

searchSourceLatLng = new google.maps.LatLng(results[0].geometry.location.k, results[0].geometry.location.B);

.B已经工作了几个星期，但现在它似乎不再是有效的财产。相反，.D可以工作，因此我的代码现在可以工作了

由于属性不再有效，我有一个具有null值的LatLng对象，这导致当我试图查看地图边界时地图崩溃

我很想知道API中如何或为什么会发生变化

还有，我肯定这是个愚蠢的问题，但为什么是.k和.D？液化天然气和Lat有什么问题

---

很高兴它被分类了，希望API不会再改变。

谢谢Matt Alexander这正是问题和解决方案，但是Google似乎再次改变了位置属性的名称，不再是.k和.D，现在是.A和.F！，查看以下控制台日志：

---

感谢Matt Alexander，这正是问题所在和解决方案，但是Google似乎再次更改了位置属性的名称，不再是.k和.D，现在是.A和.F！，查看以下控制台日志：

---

现在是“.G”和“.K”。如前所述，最好使用“.lat”和“.lng”。

因为现在是“.G”和“.K”。如前所述，最好使用“.lat”和“.lng”。

您也可以使用

 keys = Object.keys(LatLng);
 geometry.location[keys[0]]; // Obtain value for latitude

你也可以使用

 keys = Object.keys(LatLng);
 geometry.location[keys[0]]; // Obtain value for latitude

---

您可以循环查看位置的属性并获取坐标，而无需直接访问其属性：

geocoder.geocode({ 'address': value.address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK && results.length > 0) {

    var coords = [];
    for (var key in results[0].geometry.location) {
        coords.push(results[0].geometry.location[key]);
    }
    return {
        'latitude': coords[0],
        'longitude': coords[1]
    };
}
});

---

您可以循环查看位置的属性并获取坐标，而无需直接访问其属性：

geocoder.geocode({ 'address': value.address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK && results.length > 0) {

    var coords = [];
    for (var key in results[0].geometry.location) {
        coords.push(results[0].geometry.location[key]);
    }
    return {
        'latitude': coords[0],
        'longitude': coords[1]
    };
}
});

---

试试这个，希望对你有帮助

                var map = new google.maps.Map(mappnl.el.dom, {
                    zoom: 8,
                    center: {
                        lat: 52.132633,
                        lng: 5.291265999999999
                    },
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                });
                var latlong = [];
                var geocoder = new google.maps.Geocoder();        
                if(frmvalue.dir_postalcode_standard){
                    geocoder.geocode({
                        'address': frmvalue.dir_postalcode_standard
                    }, function(results, status) {

                        if (status == google.maps.GeocoderStatus.OK) {

                            slat = results[0].geometry.location.lat();
                            slng = results[0].geometry.location.lng();

                            latlong['standard'] = {
                                'lat': slat,
                                'lng': slng
                            };
                            var cityCircle = new google.maps.Circle({
                                strokeColor: '#00FF00',
                                strokeOpacity: 0.8,
                                strokeWeight: 1,
                                fillColor: '#00FF00',
                                fillOpacity: 0.15,
                                map: map,
                                center: {
                                    lat: slat,
                                    lng: slng
                                },
                                radius: frmvalue.dir_radius_standaard * 1000
                            });
                            map.setCenter({
                                lat: slat,
                                lng: slng
                            });

                            geocoder.geocode({
                                'address': frmvalue.dir_postalcode_extended
                            }, function(results, status) {

                                if (status == google.maps.GeocoderStatus.OK) {

                                    elat = results[0].geometry.location.lat();
                                    elng = results[0].geometry.location.lng();
                                    latlong['extended'] = {
                                        'lat': elat,
                                        'lng': elng
                                    };

                                    var cityCircle = new google.maps.Circle({
                                        strokeColor: '#FF0000',
                                        strokeOpacity: 0.8,
                                        strokeWeight: 1,
                                        fillColor: '#FF0000',
                                        fillOpacity: 0.15,
                                        map: map,
                                        center: {
                                            lat: elat,
                                            lng: elng
                                        },
                                        radius: frmvalue.dir_radius_extended * 1000
                                    });
                                    callback(latlong);
                                } else {
                                    console.log("Geocode was not successful for the following reason: " + status);
                                }
                            });
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }

                    });
                } else {
                    callback(false);
                }

---

试试这个，希望对你有帮助

                var map = new google.maps.Map(mappnl.el.dom, {
                    zoom: 8,
                    center: {
                        lat: 52.132633,
                        lng: 5.291265999999999
                    },
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                });
                var latlong = [];
                var geocoder = new google.maps.Geocoder();        
                if(frmvalue.dir_postalcode_standard){
                    geocoder.geocode({
                        'address': frmvalue.dir_postalcode_standard
                    }, function(results, status) {

                        if (status == google.maps.GeocoderStatus.OK) {

                            slat = results[0].geometry.location.lat();
                            slng = results[0].geometry.location.lng();

                            latlong['standard'] = {
                                'lat': slat,
                                'lng': slng
                            };
                            var cityCircle = new google.maps.Circle({
                                strokeColor: '#00FF00',
                                strokeOpacity: 0.8,
                                strokeWeight: 1,
                                fillColor: '#00FF00',
                                fillOpacity: 0.15,
                                map: map,
                                center: {
                                    lat: slat,
                                    lng: slng
                                },
                                radius: frmvalue.dir_radius_standaard * 1000
                            });
                            map.setCenter({
                                lat: slat,
                                lng: slng
                            });

                            geocoder.geocode({
                                'address': frmvalue.dir_postalcode_extended
                            }, function(results, status) {

                                if (status == google.maps.GeocoderStatus.OK) {

                                    elat = results[0].geometry.location.lat();
                                    elng = results[0].geometry.location.lng();
                                    latlong['extended'] = {
                                        'lat': elat,
                                        'lng': elng
                                    };

                                    var cityCircle = new google.maps.Circle({
                                        strokeColor: '#FF0000',
                                        strokeOpacity: 0.8,
                                        strokeWeight: 1,
                                        fillColor: '#FF0000',
                                        fillOpacity: 0.15,
                                        map: map,
                                        center: {
                                            lat: elat,
                                            lng: elng
                                        },
                                        radius: frmvalue.dir_radius_extended * 1000
                                    });
                                    callback(latlong);
                                } else {
                                    console.log("Geocode was not successful for the following reason: " + status);
                                }
                            });
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }

                    });
                } else {
                    callback(false);
                }

---

有时此文件存在以下问题：

所以如果你用我的，肯定有用

而不是使用这个：

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

使用这个：

google-chart-loader.js

---

有时此文件存在以下问题：

所以如果你用我的，肯定有用

而不是使用这个：

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

使用这个：

google-chart-loader.js

---

不要在生产中使用，它可能随时中断。不要在生产中使用，它可能随时中断。未记录的属性未记录的原因是：它们不是公共API的一部分，可能随时更改。访问LatLng对象的纬度和经度的正确方法是调用中记录的lat和lng方法。我认为谷歌有意让我们开发者保持警惕。我遇到了这个问题，但从这篇文章开始，我的代码就有点不同了。从.G和.K到.H和.L，我相信它们来自标记位置。@Yaniv geocoder.geocode函数不返回LatLng对象。因此，您无法对返回的响应调用lat或lng。@inorganik GeocoderResult.geometry.location是一个LatLng对象。未记录的属性未记录的原因是：它们不是公共API的一部分，可以随时更改。森林

---

---

访问LatLng对象的纬度和经度的直接方法是调用中记录的lat和lng方法。我认为谷歌有意让我们开发者保持警惕。我遇到了这个问题，但从这篇文章开始，我的代码就有点不同了。从.G和.K到.H和.L，我相信它们来自标记位置。@Yaniv geocoder.geocode函数不返回LatLng对象。因此，您不能在返回的响应上调用lat或lng。@inorganik GeocoderResult.geometry.location是一个LatLng对象。访问LatLng对象的纬度和经度的正确方法是调用lat和lng方法，如中所述。像.k和.D这样的值是由闭包编译器自动生成的，正如您所观察到的，它们可以而且可以！随时改变。如果您希望您的实现是可靠的，那么只应该使用文档化的对象属性。我支持这一评论。任何一个字母的变量名都是在优化阶段自动生成的，永远不会被直接调用。阅读有关如何正确使用这些对象的文档，您将看到有合法的公共方法可以访问LatLng对象的纬度和经度。访问LatLng对象的正确方法是调用lat和lng方法，如中所述。像.k和.D这样的值是由闭包编译器自动生成的，正如您所观察到的，它们可以而且可以！随时改变。如果您希望您的实现是可靠的，那么只应该使用文档化的对象属性。我支持这一评论。任何一个字母的变量名都是在优化阶段自动生成的，永远不会被直接调用。阅读有关如何正确使用这些对象的文档，您将看到可以访问合法的公共方法，而这个代码片段可能会解决这个问题，真正有助于提高您的文章质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。请注意，较旧的浏览器不支持此ES5功能。Google的地图API已更改。结果不再是属性，而是方法、lat和lng。可以调用它们来获取适当的值。虽然此代码片段可以解决此问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。请注意，较旧的浏览器不支持此ES5功能。Google的地图API已更改。结果不再是属性，而是方法、lat和lng。它们可以被调用以获得正确的值。这很奇怪，你在9月1日回答了这个问题，现在看来是在15日，谷歌地图api的最新版本，这个.G和.K已经改为.H和.L。虽然我投了这个票，因为这应该是答案。如果你不想在未来的版本中维护代码，那么lat和lng是一条出路。这很奇怪，你在9月1日回答了这个问题，现在看来是在15日，谷歌地图api的最新版本，这个.G和.K已经改成了.H和.L。虽然我投了这个票，因为这应该是答案。如果您不想在将来的版本中维护代码，那么lat和lng是一个不错的选择。