将 GEO 位置插入输入 HTML答案

【问题标题】：Insert GEO location into input HTML将 GEO 位置插入输入 HTML
【发布时间】：2017-10-05 08:27:58
【问题描述】：

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

我尝试为我的输入标签提供 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>

【问题讨论】：

您的问题中有一个实时演示报告错误，例如 Uncaught ReferenceError: $ is not defined，也许您应该解决它们？
@Quentin 我编辑了代码，不幸的是这里它不起作用但是当我在本地运行它时它可以工作，但不是我需要的。

标签： javascript html forms google-maps geolocation

【解决方案1】：

你有两个问题：

$('#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";
  }
}

【讨论】：