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

回答

相关问题