將GEO位置插入輸入HTML

-2

我試圖找到城市和國家並將標記字段中的信息作爲值插入。嘗試了幾個選項，沒有爲我工作，原始代碼成功地將信息插入元素，但這不是我所需要的。我試圖給我的輸入標籤的id名稱，並像這樣插入文本：$（'＃country'）。value（fulladd [count-1]）; 但它並沒有奏效，輸出將GEO位置插入輸入HTML

<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) { 
 
\t \t var fulladd = data.results[0].formatted_address.split(","); 
 
\t \t 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>

來源

2017-10-05 Valer Naama Kuznetsov

您的問題進行現場演示，將報告錯誤，如*未捕獲的ReferenceError：$沒有定義*也許你應該解決他們？ – Quentin

@Quentin我編輯了代碼，不幸的是在這裏它不工作，但是當我在本地運行它時，它可以工作，但不是我所需要的。 –

你有2個問題：

$（'＃國）文本（「定位...'）將您的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"; 
    } 
}

來源

2017-10-07 07:49:50 Yossi

將GEO位置插入輸入HTML

回答

相關問題