javascript 谷歌地图错误“未捕获的类型错误：无法读取未定义的属性‘x’”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33563960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map Error "Uncaught TypeError: Cannot read property 'x' of undefined"
提问by altruistic
I am working with Google map and I wrote a JS code like below and it works perfectly when a user gives location realizing permission by Browser, but when he blocks the permission, the map doesn't show anything and wen I click on its area I get the following error:\
我正在使用谷歌地图，我写了一个像下面这样的 JS 代码，当用户通过浏览器提供位置实现许可时它工作得很好，但是当他阻止许可时，地图不显示任何东西，我点击它的区域我得到以下错误：\
Error:
错误：
Uncaught TypeError: Cannot read property 'x' of undefined
未捕获的类型错误：无法读取未定义的属性“x”
JS SCRIPT:
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 ?
// '???? ????????? ???? ???' :
// '?????? ??? ????? ???? ???? ???? ????????? ?? ?????.');
}
What should I do?
我该怎么办？
采纳答案by NadZ
do not add any prototye inheritance to like this , google maps rendering has problems with it
不要像这样添加任何原型继承，谷歌地图渲染有问题
Object.prototype.boolToArray = function () {}
回答by Mike R Emo
Make sure you're not overriding 'window.self'!
确保您没有覆盖“window.self”！
Had the same problem, when I put a break point where the error was thrown in common.js, I saw that it was checking window.self, and window.self did not = window!
遇到了同样的问题，当我在common.js中在抛出错误的地方设置断点时，我看到它正在检查window.self，而window.self没有= window！
My issue: I had created a component and wrote "self = this" instead of "var self = this". I overwrote window.self which caused this error.
我的问题：我创建了一个组件并写了“self = this”而不是“var self = this”。我覆盖了导致此错误的 window.self。
回答by Hemant Ukey
This problem is usually due to the map div not being rendered before the javascript runs that needs to access it. you can find answer to this question here in this question
回答by Quethzel Díaz
I had the same issue and in my case it was because the IE or the IIS Server blocks some google Maps URLs. You can check it using your developer tools F12in Network tab and load the page with and without permission. It's probable that you found a google Maps URL with status 4XX. I solved adding the google maps URLs to the trusted sites
我遇到了同样的问题，就我而言，这是因为 IE 或 IIS 服务器阻止了一些谷歌地图 URL。您可以使用“F12网络”选项卡中的开发人员工具进行检查，并在许可和未经许可的情况下加载页面。您可能找到了状态为 4XX 的谷歌地图 URL。我解决了将谷歌地图 URL 添加到受信任站点的问题
