谷歌地图错误“未捕获的TypeError:无法读取未定义的属性’x’”

我正在使用谷歌地图,我写了一个如下所示的JS代码,当用户通过浏览器给出位置实现权限时,它可以很好地工作,但当他阻止权限时,地图不显示任何内容,我点击它的区域我得到以下错误:\

Erorr:

未捕获的TypeError:无法读取未定义的属性“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('

ساینا

'); 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('

اینجا هستید

'); 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('فاصله از شما: ' + resp.rows[0].elements[0].distance.text); $('#duration').html('زمان تخمینی رسیدن شما به این با خودرو: ' + 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 ? // 'مکان جغرافیایی یافت نشد' : // 'مرورگر شما امکان نشان دادن مکان جغرافیایی را ندارد.'); }

我该怎么办?

不要添加任何prototyeinheritance像这样,谷歌地图渲染有问题

  Object.prototype.boolToArray = function () {} 

确保你没有超越’window.self’!

有同样的问题,当我把一个断点放在common.js中抛出错误时,我看到它正在检查window.self,而window.self没有=窗口!

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

此问题通常是由于在运行需要访问它的javascript之前未映射map div。 你可以在这个问题中找到这个问题的答案

我有同样的问题,在我的情况下,这是因为IE或IIS服务器阻止了一些谷歌地图URL。 您可以使用网络选项卡中的开发人员工具F12进行检查,并在未经许可的情况下加载页面。 您可能找到状态为4XX的Google地图url。 我解决了将谷歌地图URL添加到可信站点的问题