将 GEO 位置插入输入 HTML

Question

我正在尝试定位城市和国家/地区并将信息作为值插入标记字段中。尝试了几个选项，none 对我有用，原始代码成功地将信息插入到元素中，但这不是我需要的。

我尝试为我的输入标签提供 ID 名称，并像这样在其中插入文本：$('#country').value(fulladd[count-1]); 但它没有用，输出是

<input type="text" tabindex="3" name="city">Whatever</input>

function locate() {

  var location = document.getElementById("location");
  var apiKey = 'f536d4c3330c0a1391370d1443cee848';
  var url = 'https://api.forecast.io/forecast/';

  navigator.geolocation.getCurrentPosition(success, error);

  function success(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;


     $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?latlng="+latitude + "," + longitude + "&language=en", function(data) {
  var fulladd = data.results[0].formatted_address.split(",");
  var count= fulladd.length;
      $('#country').text(fulladd[count-1]);
      $('#city').text(fulladd[count-2]);
    });
  }

  function error() {
    location.innerHTML = "Unable to retrieve your location";
  }
$('#country').text('Locating...')
}

locate();

<html lang="en">

   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css" />
      <title> Locating </title>
   </head>

   <body>
<form id="form1">
     <div class="registration_form">
      <section id="location">
            <div id="country">
                <label>
                Country<br><input type="text" tabindex="3" value="0" 
                             name="country" >
                </label>
            </div>
            <div id="city">
                <label>
                City<br><input type="text" tabindex="3" name="city">
                </label>
            </div>
            <div>
       </section>
    </div>
</form>
   
   </body>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="app.js"></script>


</html>

Answer 1

您有 2 个问题：

$('#country').text('Locating...') 将您的 div 设置为纯文本，然后您不能将其视为输入字段，因此您必须将其删除.
您尝试获取错误的元素标签。尝试专门获取输入而不是他的容器标签。

固定 HTML :

<div id="country">
  <label>Country</label>
  <input id="countryInput" type="text" tabindex="3" name="country">
</div>
<div id="city">
  <label>City</label>
  <input id="cityInput" type="text" tabindex="3" name="city">
</div>

并修复了 JS：

function locate() {

  var location = document.getElementById("location");
  var apiKey = 'f536d4c3330c0a1391370d1443cee848';
  var url = 'https://api.forecast.io/forecast/';

  navigator.geolocation.getCurrentPosition(success, error);

  function success(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;

      $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?latlng="+latitude + "," + longitude + "&language=en", function(data) {
          var fulladd = data.results[0].formatted_address.split(",");
          var count= fulladd.length;

          $('#countryInput').val(fulladd[count-1]);
          $('#cityInput').val(fulladd[count-2]);
      });
  }

  function error() {
      location.innerHTML = "Unable to retrieve your location";
  }
}

将 GEO 位置插入输入 HTML

Insert GEO location into input HTML

html

javascript

forms

google-maps

geolocation