StoreLocator使用谷歌Javascript API

我的代碼似乎沒有給javascript的地理定位函數html「id =緯度和經度」的值。使用document.getElementByID（「Id」）。value =「value」;它不是正確的方式？請檢查下面的代碼。也許我錯過了一些東西。給予我的隱藏值之後一切都必須被張貼到storelocator.phpStoreLocator使用谷歌Javascript API

<body> 


<form method="GET" action="storelocator.php" > 

    <input onclick="getLocation()" type="submit" value="Try"> 
    <input id="latitudeId" name="lat" type="hidden" > 
    <input id="longitudeId" name="lng" type="hidden" > 

    <div class="dropdown"> 
    <select name="radius"> 
     <option value="1000">1000</option> 
     <option value="500" selected="selected" >500</option> 
     <option value="300">300</option> 
     <option value="100">100</option> 
    </select> 
    </div>  

</form> 

<p id="show"></p> 

<script type="text/javascript"> 
var x = document.getElementById("show"); 

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 

    function showPosition(position) { 
     var lat = position.coords.latitude; 
     var lng = position.coords.longitude; 

     document.getElementByID("latitudeId").value = lat; 
     document.getElementByID("longitudeId").value = lng; 
    } 
}  

</script> 


</body>

來源

2017-10-17 Peekaymaja

此代碼工作。我只是在控制檯內顯示結果。第一個錯誤，你做somethign怪異與功能showPosition被你的getLocation內部創建的，我認爲缺少一個}

關於您的getElementById，要小心，這是getElementById，而不是getElementByID以大寫D.

var x = document.getElementById("show"); 
 
var form = document.querySelector('form'); 
 
form.addEventListener('submit', function(e) { 
 
    e.preventDefault(); 
 
    getLocation(); 
 
}); 
 

 
function getLocation() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(showPosition); 
 
    } else { 
 
     x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 
function showPosition(position) { 
 
     var lat = position.coords.latitude; 
 
     var lng = position.coords.longitude; 
 

 
     document.getElementById("latitudeId").value = lat; 
 
     document.getElementById("longitudeId").value = lng; 
 

 
     form.submit(); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <form method="GET" action="storelocator.php" > 
 
    
 
     <input type="submit" value="Try"> 
 
     <input id="latitudeId" name="lat" type="hidden" > 
 
     <input id="longitudeId" name="lng" type="hidden" > 
 
    
 
     <div class="dropdown"> 
 
     <select name="radius"> 
 
      <option value="1000">1000</option> 
 
      <option value="500" selected="selected" >500</option> 
 
      <option value="300">300</option> 
 
      <option value="100">100</option> 
 
     </select> 
 
     </div>  
 
    
 
    </form> 
 
    
 
    <p id="show"></p> 
 
    
 
    <script type="text/javascript" src="test.js"></script> 
 
</body> 
 
</html>

來源

2017-10-17 22:08:39 sheplu

謝謝，事情是我想給html隱藏值的位置值。問題是，當它重定向到storelocator.php時，url顯示有些值缺失顯示：http：//localhost/mywebsite/storelocator.php？lat =＆lng =＆radius = 500，所以我假設這意味着lat和lng沒有得到只有半徑的值。 – Peekaymaja

只是更新了代碼。這不起作用，因爲當您的表單立即將您重定向到新頁面時，無需等待地理定位。現在窗體等待有地理位置，然後重定向。我測試了它，並且它與Chrome和Firefox一起工作 – sheplu

好的，謝謝。我看到你做了一些改變生病很快就會嘗試。 – Peekaymaja

StoreLocator使用谷歌Javascript API

回答

相關問題