如何使用Javascript将地理位置坐标存储到数组中？答案

【问题标题】：How to store geolocation coordinates into an array with Javascript?如何使用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()
是的，我也在寻找解决方案。

标签： javascript arrays html geolocation

【解决方案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>

【讨论】：

这根本不是我想要的。我希望能够将经纬度坐标放入一个数组中，并能够在函数之外访问数组元素。