【问题标题】：Google Map Error "Uncaught TypeError: Cannot read property 'x' of undefined"谷歌地图错误“未捕获的类型错误：无法读取未定义的属性‘x’”
【发布时间】：2015-11-06 09:54:28
【问题描述】：

我正在使用谷歌地图，我编写了一个如下所示的 JS 代码，当用户通过浏览器提供位置实现权限时，它可以完美运行，但是当他阻止权限时，地图不显示任何内容，然后我点击它的区域我收到以下错误：\

错误：

未捕获的类型错误：无法读取未定义的属性“x”

JS 脚本：

    var pos = new Object();
    var marker1 = new Object();
    var marker2 = new Object();
    var resp;
    var loc;
    var bus_loc;

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            //        zoom: 13
        });

        var infoWindow = new google.maps.InfoWindow({});
        var scope = angular.element($("#address")).scope();
        var angLoc;
        scope.$apply(function () {
            angLoc = scope.contact.business.location.split(',');
            bus_loc = {
                lat: parseFloat(angLoc[0]),
                lng: parseFloat(angLoc[1])
            };
        });
        var image = '/static/image/main_template/map/2.png';
        marker2 = new google.maps.Marker({
            map: map,
            position: bus_loc,
            icon: image
        });
        marker2.addListener('click', function() {
            infoWindow.setPosition(bus_loc);
            infoWindow.setContent('<p style="padding: 0; margin-top: 10px; direction: rtl">ساینا</p>');
            infoWindow.open(map, marker2);
        });

        map.setCenter(bus_loc);
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                loc = {
                    lat: parseFloat(pos.lat),
                    lng: parseFloat(pos.lng)
                };
                var image = '/static/image/main_template/map/1.png';
                marker1 = new google.maps.Marker({
                    map: map,
                    position: loc,
                    icon: image
                });
                marker1.addListener('click', function() {
                    infoWindow.setPosition(loc);
                    infoWindow.setContent('<p style="padding: 0; margin-top: 10px; direction: rtl">اینجا هستید</p>');
                    infoWindow.open(map, marker1);
                });
                map.setCenter(loc);

                var distanceService = new google.maps.DistanceMatrixService();
                distanceService.getDistanceMatrix({
                        origins: ['' + loc.lat + ',' + loc.lng + ''],
                        destinations: ['' + bus_loc.lat + ',' + bus_loc.lng + ''],
                        travelMode: google.maps.TravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC,
                        durationInTraffic: true,
                        avoidHighways: false,
                        avoidTolls: false
                    },
                    function(response, status) {
                        if (status !== google.maps.DistanceMatrixStatus.OK) {
                            console.log('Error:', status);
                        } else {
                            resp = response;
                            $('#distance').html('<b>فاصله از شما: <b>' + resp.rows[0].elements[0].distance.text);
                            $('#duration').html('<b>زمان تخمینی رسیدن شما به این با خودرو: <b>' + resp.rows[0].elements[0].duration.text);

                        }
                    });



                var bounds = new google.maps.LatLngBounds();
                bounds.extend(marker1.getPosition());
                bounds.extend(marker2.getPosition());

                map.fitBounds(bounds);


            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }




    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        //    infoWindow.setPosition(pos);
        //    infoWindow.setContent(browserHasGeolocation ?
        //        'مکان جغرافیایی یافت نشد' :
        //        'مرورگر شما امکان نشان دادن مکان جغرافیایی را ندارد.');
    }

我该怎么办？

【问题讨论】：

错误的行号？
一般不会报错，但是当我点击地图区域时：common.js:191 Uncaught TypeError: Cannot read property 'x' of undefined
我的第一个想法：bus_loc 应该是一个“新的 google.maps.LatLng”，而不仅仅是你自己用 {lat: ..., lng: ...} 制作的对象
我使用了“新的 google.maps.LatLng”，没有变化！

标签： javascript jquery angularjs google-maps dom-events

【解决方案1】：

不要像这样添加任何原型继承，谷歌地图渲染有问题

    Object.prototype.boolToArray = function () {}

【讨论】：

【解决方案2】：

确保您没有覆盖“window.self”！

遇到同样的问题，当我在common.js中放了一个抛出错误的断点时，我看到它正在检查window.self，而window.self没有=window！

我的问题：我创建了一个组件并写了“self = this”而不是“var self = this”。我覆盖了导致此错误的 window.self。

【讨论】：

【解决方案3】：

这个问题通常是由于在需要访问它的 javascript 运行之前未呈现地图 div。你可以找到答案question here in this question

【讨论】：

我把JS脚本放在body底部

【解决方案4】：

我遇到了同样的问题，在我的情况下，这是因为 IE 或 IIS 服务器阻止了一些谷歌地图 URL。您可以使用您的开发者工具 F12 在“网络”选项卡中检查它，并在有或没有许可的情况下加载页面。您可能发现了一个状态为 4XX 的谷歌地图 URL。我解决了将谷歌地图 URL 添加到受信任站点的问题

【讨论】：