javascript 未捕获的类型错误:无法读取未定义的属性“纬度”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14220144/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:02:26  来源:igfitidea点击:

Uncaught TypeError: Cannot read property 'latitude' of undefined

javascripthtmlgoogle-mapsgoogle-maps-api-3geolocation

提问by Mark H

Hi all I have the following code:

大家好,我有以下代码:

  var map;
  var infowindow;


  function getLocation()
    {
    if (navigator.geolocation)
      {
      navigator.geolocation.getCurrentPosition(initialize);
      }
    else{x.innerHTML="Geolocation is not supported by this browser.";}
    }

  function initialize(position) {
    var pyrmont = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

    var request = {
      location: pyrmont,
      radius: 500,
      types: ['restaurant']
    };
 ...

Basically I can get the map to work great if I set the Long/Lat co-ordinates but instead I want these to be passed by getting the users location. With the code above the map is displaying on my phone but with the following error:

基本上,如果我设置 Long/Lat 坐标,我可以让地图工作得很好,但我希望通过获取用户位置来传递这些坐标。使用上面的代码,地图显示在我的手机上,但出现以下错误:

TypeError: 'undefined' is not an object (evaluating 'position.coords.latitude')

but on the desktop I get no map and the following error:

但在桌面上我没有得到地图和以下错误:

   Uncaught TypeError: Cannot read property 'latitude' of undefined 

Any help would be great I'm a newbie to Javascript and these APis

任何帮助都会很棒我是 Javascript 和这些 API 的新手

采纳答案by BernzSed

Later in your code, on your page at http://markhaynes.me/mwp/addloc.html, you're calling google.maps.event.addDomListener(window, 'load', initialize);

稍后在您的代码中,在您位于http://markhaynes.me/mwp/addloc.html的页面上,您正在调用google.maps.event.addDomListener(window, 'load', initialize);

This causes Google to call the initialize() function, but it passes an event object as the positionparameter instead of the position object you expected.

这会导致 Google 调用 initialize() 函数,但它传递一个事件对象作为position参数而不是您期望的位置对象。

回答by Louis Ricci

Well it's not an issue with the geolocation API. Here's a JSFIDDLE of geolocation: http://jsfiddle.net/w4nvZ/3/

嗯,这不是地理定位 API 的问题。这是地理定位的 JSFIDDLE:http: //jsfiddle.net/w4nvZ/3/

There's also the documentation and examples for the API here: http://www.w3schools.com/html/html5_geolocation.asp

这里还有 API 的文档和示例:http: //www.w3schools.com/html/html5_geolocation.asp

Google even has an example of geolocation working with the JavaScript Google Maps API: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-geolocation

谷歌甚至有一个使用 JavaScript Google Maps API 的地理定位示例:https: //google-developers.appspot.com/maps/documentation/javascript/examples/map-geolocation

 var map;
function initialize() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);