2015-05-05 69 views
0

當我點擊一個按鈕時,如何獲取地理位置並將其返回到表單中。如何以html格式獲取地理位置和返回值

所以,當點擊地理位置獲取我的位置,然後返回從中的輸出,所以我可以稍後使用它。 http://jsfiddle.net/Mikki10/as3mg177/1/

地理位置

<html> 
<body> 
    <p>Click the button to get your coordinates.</p> 
    <button onclick="getLocation()">Get geolocation and put into from</button> 
    <p id="demo"></p> 
    <script> 
     var x = document.getElementById("demo"); 

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

     function showPosition(position) { 
      x.innerHTML = "Latitude: " + position.coords.latitude + 
       "<br>Longitude: " + position.coords.longitude; 
     } 
    </script> 
    <form action="geo/ruteplanlag.php" method="get"> 
     <input style="width: 98%; margin: 20px auto; text-align: center;" name="startadr" type="text" value="(Custom value like Orlando or geolocation) " /> 
     <input style="width: 98%; margin: 20px auto; text-align: center;" name="slutadr" type="text" value="Miami" /> 
     <div class="buttonHolder"> 
      <input type="submit" value="Start ruteplanlægning"> 
     </div> 
    </form> 
</body> 
</html> 
+0

地理位置,我會喜歡這樣的從 position.coords.latitude +回報 「」 + position.coords.longitude; –

+0

您在您的html中缺少''。除此之外,執行此代碼時是否出現錯誤? – Lal

+0

ctrl + c ctrl + v錯誤:)並沒有錯誤 –

回答

2

我現在得到的工作代碼。 http://jsfiddle.net/Mikki10/gs5ed5sc/1/

<script type="text/javascript"> 
    function getLocationConstant() { 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError); 
     } else { 
      alert("Your browser or device doesn't support Geolocation"); 
     } 
    } 

    // If we have a successful location update 
    function onGeoSuccess(event) { 
     document.getElementById("Latitude").value = event.coords.latitude; 
     document.getElementById("Longitude").value = event.coords.longitude; 
     document.getElementById("Position1").value = event.coords.latitude + ", " + event.coords.longitude; 

    } 

    // If something has gone wrong with the geolocation request 
    function onGeoError(event) { 
     alert("Error code " + event.code + ". " + event.message); 
    } 
</script> 
<form action="geo/ruteplanlag.php" method="get"> 
    <div id="divSample" class="hideClass">Latitude: 
     <input type="text" id="Latitude" name="Latitude" value=""> 
     <br> 
     <br>Longitude: 
     <input type="text" id="Longitude" name="Longitude" value=""> 
     <br> 
    </div> 
    <br>Position 
    <input type="text" id="Position1" name="Position1" value="Miami"> 
    <br> 
    <br> 
    <input type="button" value="Get Location" onclick="getLocationConstant()" /> 
    <br> 
    <br> 
    <input type="submit" value="Add GPS Location" class=small> 
</form> 
0

用這個position.coords.latitude & position.coords.longitude無法在手機上進行地理定位event.coords.latitude & event.coords.longitude,因爲它兼容大多數瀏覽器。

<script type="text/javascript"> 
    function getLocation() { 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(showPosition, showError,{enableHighAccuracy: true,timeout: 60000,maximumAge: 0}); 
      } else { 
       alert("Geolocation is not supported by this browser."); 
      } 
} 

     function showPosition(position) { 


     document.getElementById("lat").value = position.coords.latitude; 
     document.getElementById("long").value = position.coords.longitude; 
     document.getElementById("latlong").value = position.coords.longitude +", "+ position.coords.longitude; 
        } 

      function showError(error) { 
       switch(error.code) { 
       case error.PERMISSION_DENIED: 
        x.innerHTML = "User denied the request for Geolocation." 
        break; 
       case error.POSITION_UNAVAILABLE: 
        x.innerHTML = "Location information is unavailable." 
        break; 
       case error.TIMEOUT: 
        x.innerHTML = "The request to get user location timed out." 
        break; 
       case error.UNKNOWN_ERROR: 
        x.innerHTML = "An unknown error occurred." 


       break; 
       } 
      } 
     </script> 
    <form action="geo/ruteplanlag.php" method="get"> 
    <br> 
    Latitude: 
    <input type="text" id="Lat" name="Latitude" value=""> 
    <br> 
    <br>Longitude: 
    <input type="text" id="Long" name="Longitude" value=""> 
    <br> 
    </div> 
    <br>Position 
    <input type="text" id="latlong" name="latlong" value="Miami"> 
    <br> 
    <br> 
    <input type="button" value="Get Location" onclick="getLocation()" /> 
    <br> 
    <br> 
    <input type="submit" value="Add GPS"> 
</form>