Fatal编程技术网
  • javascript/
  • 如何使用Javascript将地理位置坐标存储到数组中？

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

javascript arrays html geolocation

如何使用Javascript将地理位置坐标存储到数组中？,javascript,arrays,html,geolocation,Javascript,Arrays,Html,Geolocation,我试图做的是使用html5 geolocation查找用户的位置，并将纬度和经度坐标存储到一个数组中，以便进一步与google maps和sql语句一起使用。当我尝试将它们放入数组并将其写入窗口时，没有显示任何内容，或者它说它是未定义的。下面的代码只是向我展示它是否被放入数组的一种方式。提前谢谢 <script> var array = []; function getLocation() { if (navigator.geolocation) { navi

我试图做的是使用html5 geolocation查找用户的位置，并将纬度和经度坐标存储到一个数组中，以便进一步与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>


var数组=[]；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}
}
功能显示位置（位置）{
var lat=位置坐标纬度；
var lon=位置坐标经度；
阵列推力（横向、纵向）；
}
document.write（数组）；
这是我编写的一个简单脚本，它几乎满足了您的需求

<!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>


地理位置-以HTML5呈现
navigator.geolocation.getCurrentPosition（
职能（职位）{
函数句柄错误（错误）
{  
开关（错误代码）
{  
案例错误。权限被拒绝：document.getElementById（“状态”）.innerHTML=“您没有共享地理位置数据”；
打破
case error.POSITION\u不可用：document.getElementById（“status”）.innerHTML=“我无法检测到您当前的位置”；
打破
case error.TIMEOUT:document.getElementById（“状态”）.innerHTML=“您的浏览器已超时”；
打破
默认值：document.getElementById（“状态”）.innerHTML=“发生未知错误。”；
打破
}  
}  
var lat=位置坐标纬度；
var lon=位置坐标经度；
var精度=位置坐标精度；
var航向=position.coords.heading；
var alt=位置坐标高度；
var altAcc=position.coords.altitudeAccuracy；
var速度=位置坐标速度；
document.getElementById（“lat”）.innerHTML=“纬度：”+lat+“
”；
document.getElementById（“lon”）.innerHTML=“经度：”+lon+“
”；
document.getElementById（“heading”）.innerHTML=“heading:“+heading+”从正北顺时针方向度。
”；
document.getElementById（“准确度”）.innerHTML=“准确度：我离你“+（准确度*3）+”英尺远；
document.getElementById（“alt”）.innerHTML=“海平面：“+alt+”米。
”；
document.getElementById（“altAcc”）.innerHTML=“海平面精度：“+altAcc+”米。
”；
document.getElementById（“速度”）.innerHTML=“风速：“+speed+”米/秒。
”；
document.getElementById（“状态”）.innerHTML=“”；
成功（职位）；
}
);
变量映射；//定义一个全局对象以保存贴图对象
功能成功（职位）
{
//将坐标定义为Google Maps LatLng对象
var coords=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
//准备地图选项
变量映射选项={
缩放：20，
中心：coords，
mapTypeControl:true，
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
//创建地图，并将其放置在map_canvas div中
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
//放置初始标记
var marker=new google.maps.marker({
职位：coords，
地图：地图，
标题：“您当前的位置！”
});
}
纬度：
经度：
标题：
准确度：
海平面：
海平面精度：
风速：
管理异步功能很容易。您只需要将所有代码放入另一个函数中，然后在成功部分内调用该函数

//这就是你想要做的

错误

（这将不起作用，因为它将在getCurrentPosition完成之前执行警报和“其他酷东西”代码。）*

对

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 /*
}
地理编码是异步的……您必须等待数据返回并在回调中使用它。另外，您从未调用过
getLocation（）
，这完全不是我想要的。我希望能够将纬度和经度坐标放入数组，并能够访问函数外部的数组元素。我不能访问函数外部的数组元素吗？异步过程需要一些时间来适应。当JavaScript运行“getCurrentPosition（）”时，它会在后台运行它，并立即转到脚本中的下一行代码。您的警报没有返回任何内容，因为它总是在加载数组之前执行getCurrentPosition（）。通过将alert（array）放在我们所做的位置，它位于success函数中，因此它只会在getCurrentPosition完成并填充数组后运行。这对我一点帮助都没有。在函数外部使用数组时，我希望能够访问数组中的元素。你知道我有什么办法吗？嗨，完美的用户名；我已经更新了我的示例，向您展示了如何仍然可以访问数组中的元素，您只需将所有代码放入函数中，以便在getCurrentPosition（）成功之前不会执行它。我希望这有帮助。如果这有用，请投票。 
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 /*
}