Question

我要做的是使用html5地理定位查找用户的位置，并将纬度和经度坐标存储到数组中，以便进一步使用google maps和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>

Answer 1

管理同步功能很容易。您只需将所有代码放入另一个函数，然后在成功部分内调用该函数。

//这是你想要做的事情

<强> WRONG

（这不起作用，因为它会在getCurrentPosition完成之前执行警报和其他很酷的东西＆＃34;代码。）*

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 /* }

Answer 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将地理位置坐标存储到数组中？

2 个答案: