如何使用Javascript将地理位置坐标存储到数组中？
Posted
技术标签:
【中文标题】如何使用Javascript将地理位置坐标存储到数组中？【英文标题】：How to store geolocation coordinates into an array with Javascript? 【发布时间】：2015-05-23 00:21:21 【问题描述】：我想要做的是使用 html5 地理位置找到用户的位置，并将纬度和经度坐标存储到一个数组中，以便进一步与谷歌地图和 sql 语句一起使用。当我尝试将它们放入数组并将其写入窗口时，什么都没有显示或者它说它是未定义的。下面的代码只是向我展示它是否被放入数组的一种方式。提前致谢！
<script>
var array = [];
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position)
var lat = position.coords.latitude;
var lon = position.coords.longitude;
array.push(lat, lon);
document.write(array);
</script>
【问题讨论】：
地理编码是异步的...您必须等待数据返回并在回调中使用它。你也从来没有打电话给getLocation()
是的，我也在寻找解决方案。
【参考方案1】：
很容易管理一个同步函数。您只需将所有代码放入另一个函数中，然后在成功部分中调用该函数。
//这就是你想要做的事情
错误
（这不起作用，因为它将在 getCurrentPosition 完成之前执行警报和“其他很酷的东西”代码。）*
var array = [];
navigator.geolocation.getCurrentPosition(function(position)
var lat = position.coords.latitude;
var lon = position.coords.longitude;
array.push(lat, lon);
);
alert(array);
/* All of the other cool
stuff you are going to do
with the array /*
正确
var array = [];
navigator.geolocation.getCurrentPosition(function(position)
var lat = position.coords.latitude;
var lon = position.coords.longitude;
array.push(lat, lon);
locationCode()
);
function locationCode()
alert(array);
/* All of the other cool
stuff you are going to do
with the array /*
【讨论】：
不能访问函数外的数组元素吗？ a同步进程需要一些时间来适应。当 javascript 运行“getCurrentPosition()”时，它会在后台运行它，并立即转到脚本中的下一行代码。您的警报没有返回任何内容，因为它总是在 getCurrentPosition() 完成加载数组之前执行。通过将 alert(array) 放在我们做的地方，它在成功函数中，所以它只会在 getCurrentPosition 完成后运行，并且数组已经被填充。 这对我一点帮助都没有。当我在函数外部使用数组时，我希望能够访问数组中的元素。你知道我可以做到这一点吗？ 嗨 The_Perfect_Username;我更新了我的示例以向您展示如何仍然可以访问数组中的元素，您只需将所有代码放入函数中，这样它就不会在 getCurrentPosition() 成功之后执行。我希望这会有所帮助。如果这有用，请点赞。【参考方案2】：这是我编写的一个简单脚本，几乎可以满足您的需求。
<!DOCTYPE html>
<html>
<head>
<title>Geolocation - Presented in HTML5</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
navigator.geolocation.getCurrentPosition(
function(position)
function handle_errors(error)
switch(error.code)
case error.PERMISSION_DENIED: document.getElementById("status").innerHTML = "you did not share geolocation data";
break;
case error.POSITION_UNAVAILABLE: document.getElementById("status").innerHTML = "I could not detect current your position";
break;
case error.TIMEOUT: document.getElementById("status").innerHTML = "your browser has timed out";
break;
default: document.getElementById("status").innerHTML = "an unknown error has occurred.";
break;
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var accuracy = position.coords.accuracy;
var heading = position.coords.heading;
var alt = position.coords.altitude;
var altAcc = position.coords.altitudeAccuracy;
var speed = position.coords.speed;
document.getElementById("lat").innerHTML = "Latitude: <b>" + lat + "</b><br/>";
document.getElementById("lon").innerHTML = "Longitude: <b>" + lon + "</b><br/>";
document.getElementById("heading").innerHTML = "Heading: <b>" + heading + "</b> degrees clockwise from true North.<br/>";
document.getElementById("accuracy").innerHTML = "Accuracy: I am <b>" + (accuracy * 3) + "</b> feet away from you.<br/>";
document.getElementById("alt").innerHTML = "Sea Level: <b>" + alt + "</b> meters. <br/>";
document.getElementById("altAcc").innerHTML = "Sea Level Accuracy: <b>" + altAcc + "</b> meters. <br/>";
document.getElementById("speed").innerHTML = "Windspeed: <b>" + speed + "</b> meters/second.<br/>";
document.getElementById("status").innerHTML = "";
success(position);
);
</script>
<script>
var map; // Define a global to hold the map object
function success(position)
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions =
zoom: 20,
center: coords,
mapTypeControl: true,
navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL,
mapTypeId: google.maps.MapTypeId.SATELLITE
;
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker(
position: coords,
map: map,
title: "Your current location!"
);
</script>
</head>
<body>
<div style="font-family: Verdana, Arial; font-size: 12px; color: black;">
<div id="lat">Latitude:</div>
<div id="lon">Longitude:</div>
<div id="heading">Heading:</div>
<div id="accuracy">Accuracy:</div>
<div id="alt">Sea Level:</div>
<div id="altAcc">Sea Level Accuracy:</div>
<div id="speed">Windspeed:</div>
<div id="status"></div>
</div>
<br/><br/>
<div id="map_canvas"
style="
width: 600px;
height: 400px;
border-right:
1px solid #666666;
border-bottom: 1px solid #666666;
border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
margin: 20px;
">
</div>
</body>
</html>
【讨论】：
这根本不是我想要的。我希望能够将经纬度坐标放入一个数组中，并能够在函数之外访问数组元素。以上是关于如何使用Javascript将地理位置坐标存储到数组中？的主要内容，如果未能解决你的问题，请参考以下文章
Asp.net 如何将列表从代码隐藏发送到 javascript 以在 googlemap 中显示坐标