StoreLocator使用谷歌Javascript API

时间:2017-10-17 21:57:48

标签: javascript php html

我的代码似乎没有给出html" id =纬度和经度"来自javascript地理定位函数的值。使用document.getElementByID(" Id")。value =" value&#34 ;;这不是正确的方法吗?请检查下面的代码。也许我错过了什么。在给出我的隐藏值之后,必须将所有内容发布到storelocator.php

<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>

1 个答案:

答案 0 :(得分:0)

此代码正常运行。我只是在控制台中显示结果。 第一个错误,你在你的getLocation中创建的函数showPosition让你有点奇怪,我想错过}

关于你的getElementById,请小心,它是getElementById而不是getElementByID的大写字母D.

&#13;
&#13;
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();
}
&#13;
<!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>
&#13;
&#13;
&#13;