Мне нужно иметь долготу и широту внутри формы ввода, но я не могу понять, как это сделать, я попробовал несколько примеров, как видно из кода ниже (не работает).

<script>
function data(){

var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
  }
}

function showPosition(position) {
  x.innerHTML = 
  "Latitude: " + position.coords.latitude + 
   "<br>Longitude: " + position.coords.longitude;
}
}</script>

<form name="test_form">
  <input id="demo" type="text" value=""> 
</form>
<button onclick="getLocation();">GO</button>

Ожидаемые результаты: долгота и широта должны быть внутри поля ввода, или, если возможно, долгота в одном поле ввода, широта в анотере

1
Nicola O'Donoghue 1 Май 2019 в 20:17

3 ответа

Лучший ответ

Ну вот:

Разметка

<input id="lat" type="text" value=""> 
<input id="long" type="text" value=""> 
<button onclick="getLocation();">GO</button>

JS

function getLocation(){
      navigator.geolocation.getCurrentPosition(function(position){
        var coordinates = position.coords;
        document.getElementById('lat').value = coordinates.latitude;
        document.getElementById('long').value = coordinates.longitude;
      });
   }
1
wakajawaka 1 Май 2019 в 17:26

Вам нужно установить значение ввода вместо переопределения его HTML.

Подобно

// set the value of the input x.value = "Latitude: " + position.coords.latitude + ...

Обновлен, чтобы включить отдельные поля для широты / долготы

См. Демонстрацию ниже

function showPosition(position) {
  console.log('location obtained');
  console.log(position);

  var lon = document.getElementById("lon");
  var lat = document.getElementById("lat");

  // set the value of the inputs
  lon.value = position.coords.longitude;
  lat.value = position.coords.latitude;
}

function getLocation() {
  console.log('button clicked');

  if (navigator.geolocation) {
    console.log('getting location');
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}
label {
  width: 100px;
  font-weight: bolder;
  display: inline-block;
}
<label>Longitud:</label><input id="lon" type="text" value=""> <br/>
<label>Latitude:</label><input id="lat" type="text" value=""> <br/>
<button onclick="getLocation();">GO</button>
2
blurfus 1 Май 2019 в 17:41

Вы должны установить x.value = вместо его innerHTML.

1
Kai Lehmann 1 Май 2019 в 17:27