Как сохранить координаты геолокации в массив с Javascript?

То, что я пытаюсь сделать, - найти местоположение пользователя, используя html5 геолокацию, и сохранить координаты широты и долготы в массив для дальнейшего использования с картами google и операторами sql. Когда я пытаюсь помещать их в массив и записывать его в окно, ничего не появляется, или он говорит, что он не определен. Код ниже - это просто способ показать мне, будет ли он помещен в массив. Заранее спасибо!Как сохранить координаты геолокации в массив с Javascript?

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

источник

2015-05-23 The_Perfect_Username

Геокодирование является асинхронным ... вам нужно подождать, пока данные будут возвращены и будут использованы в обратном вызове. Также вы никогда не называете 'getLocation()' – charlietfl

Это простой сценарий, который я написал, что делает практически то, что вы ищете.

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

источник

2015-05-23 00:44:12 Rich

Это совсем не то, что я ищу. Я хочу, чтобы можно было установить координаты широты и долготы в массив и иметь доступ к элементам массива вне функции. –

Легко управлять синхронной функцией. Вам просто нужно поместить весь свой код в другую функцию, а затем вызвать эту функцию внутри части успеха.

// Вот то, что вы пытаетесь сделать

НЕПРАВИЛЬНО

(Это не будет работать, так как он будет выполнять оповещение и «другие интересные вещи» код перед 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 /*

RIGHT

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

источник

2015-05-23 00:47:48

Могу ли я получить доступ к элементам массива вне функции? –

aСинхронные процессы начинают привыкать. Когда JavaScript запускает «getCurrentPosition()», он запускает его в фоновом режиме и сразу переходит к следующей строке кода в вашем скрипте. Ваше предупреждение ничего не возвращало, потому что оно всегда выполнялось до того, как была выполнена загрузка getCurrentPosition(), загружая массив. Поместив alert (массив), где мы это сделали, он находится внутри функции success, поэтому он будет работать только после завершения getCurrentPosition, и массив был заполнен. –

Это не помогает мне вообще. Я хочу иметь доступ к элементам в массиве, когда я использую массив вне функции. Вы знаете, как я могу это сделать? –

Как сохранить координаты геолокации в массив с Javascript?

ответ

Смежные вопросы