保存HTML5位置信息的文件

-1

保存谷歌地理定位信息的文件，當訪問者點擊「接受我的位置的檢測」
輸出谷歌地圖網址與信息

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     #tripmeter { 
 
     border: 0px double black; 
 
     padding: 0px; 
 
     margin: 0px 0; 
 
     } 
 
     
 
     p { 
 
     color: #222; 
 
     font: 14px Arial; 
 
     } 
 
     
 
     span { 
 
     color: #00C; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="tripmeter"> 
 
     <p> 
 
     Starting Location (lat, lon):<br/> 
 
     <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg; 
 
     </p> 
 
     <p> 
 
     Current Location (lat, lon):<br/> 
 
     <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg; 
 
     </p> 
 
     <p> 
 
     Distance from starting location:<br/> 
 
     <span id="distance">0</span> km 
 
     </p> 
 
    </div> 
 
    <script> 
 
     window.onload = function() { 
 
     var startPos; 
 
     
 
     if (navigator.geolocation) { 
 
      navigator.geolocation.getCurrentPosition(function(position) { 
 
      startPos = position; 
 
      document.getElementById("startLat").innerHTML = startPos.coords.latitude; 
 
      document.getElementById("startLon").innerHTML = startPos.coords.longitude; 
 
      }, function(error) { 
 
      alert("Error occurred. Error code: " + error.code); 
 
      // error.code can be: 
 
      // 0: unknown error 
 
      // 1: permission denied 
 
      // 2: position unavailable (error response from locaton provider) 
 
      // 3: timed out 
 
      }); 
 
     
 
      navigator.geolocation.watchPosition(function(position) { 
 
      document.getElementById("currentLat").innerHTML = position.coords.latitude; 
 
      document.getElementById("currentLon").innerHTML = position.coords.longitude; 
 
      document.getElementById("distance").innerHTML = 
 
       calculateDistance(startPos.coords.latitude, startPos.coords.longitude, 
 
           position.coords.latitude, position.coords.longitude); 
 
      }); 
 
     } 
 
     }; 
 
     
 
     // Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010. 
 
     // http://www.movable-type.co.uk/scripts/latlong.html 
 
     // Under Creative Commons License http://creativecommons.org/licenses/by/3.0/ 
 
     function calculateDistance(lat1, lon1, lat2, lon2) { 
 
     var R = 6371; // km 
 
     var dLat = (lat2-lat1).toRad(); 
 
     var dLon = (lon2-lon1).toRad(); 
 
     var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
 
       Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
 
       Math.sin(dLon/2) * Math.sin(dLon/2); 
 
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
 
     var d = R * c; 
 
     return d; 
 
     } 
 
     Number.prototype.toRad = function() { 
 
     return this * Math.PI/180; 
 
     } 
 
    </script> 
 
    </body> 
 
</html> 
 

 
    <meta charset="utf-8"/> 
 
    
 
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
 
</head> 
 
    
 
<body> 
 
    <div id="pos" style="width:800px; height:600px;"> 
 
     Detection Location.. 
 
    </div> 
 
    
 
    <script> 
 
     function initialize(coords) { 
 
      var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
 
      var myOptions = { 
 
       zoom: 8, 
 
       center: latlng, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      }; 
 
      var map = new google.maps.Map(document.getElementById("pos"), myOptions); 
 
      
 
      var marker = new google.maps.Marker({ 
 
       position: latlng, 
 
       map: map, 
 
       title: "You" 
 
      }); 
 
     } 
 
    
 
     navigator.geolocation.getCurrentPosition(function(position){ 
 
      initialize(position.coords); 
 
     }, function(){ 
 
      document.getElementById('pos').innerHTML = 'Failed to detect Location.'; 
 
     }); 
 
    </script> 
 

 
<?php 
 
$dns = gethostbyaddr($_SERVER['REMOTE_ADDR']); 
 
$ip = $_SERVER['REMOTE_ADDR']; 
 
$rand2 = time(); 
 
$port= htmlspecialchars(
 
$_SERVER['REMOTE_PORT']); 
 
$browser= htmlspecialchars(
 
$_SERVER['HTTP_USER_AGENT']); 
 
$ausgabe="• I WANT TO SAVE THE GOOGLE MAPS URL WITH THE DETECTED LOCATION •"; 
 
$datum=date("d.m.Y, H:i:s"); 
 
$array = file("location.log"); // Datei in ein Array einlesen 
 
array_unshift($array, "".$datum." ".$ausgabe."\n"); 
 
$string = implode("", $array); 
 
file_put_contents("location.log", $string); 
 
?> 
 

 
</body> 
 
</html>

任何人都有一個好主意？ :)

來源

2015-02-06 Thomas

我們有什麼好主意嗎？你有問題嗎？你想改進代碼嗎？請更具體一些，你需要什麼:) – 2015-02-06 09:09:57

代碼看起來像是從2個不同的來源放在一起。在任何情況下，你都必須通過AJAX發送座標到服務器，這意味着一個單獨的腳本來處理保存座標 – itd 2015-02-06 09:13:04

當前無法「保存」用戶在文件中的位置。我想這樣做，但我不知道如何，導致我在這個初學者。你能給我一個AJAX @itd腳本的例子嗎？是它的兩個腳本結合在一起。（一個用於LAT LON TEXT，另一個用於在地圖上顯示）。 – Thomas 2015-02-06 09:21:50

如果您想要將經度和緯度保存到一個文件中（請檢查Google API的使用條款，如果您允許的話），您必須先獲取座標，然後將它們發送給您服務器通過AJAX。

下面的例子不是「複製/粘貼」材料，因爲我沒有試用它們。將它們用作一般準則。

首先，你需要創建一個腳本，將獲取座標：

<html> 
<head>  
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
</head> 

<body> 
    <div id="pos" style="width:800px; height:600px;"> 
     Detection Location.. 
    </div> 

    <script> 
    $(function(){ 
      function initialize(coords) { 
       $.ajax({ 
        url: 'saveLocation.php', 
        data: { 
         longitude:coords.longitude, 
         latitude:coords.latitude 
         }, 
        error: function() { 
         $('#pos').html("Could not save location"); 
        }, 
        success: function(data) { 
         $('#pos').html("Location saved successfully"); 
        }, 
        type: 'POST' 
       }); 
      } 

      navigator.geolocation.getCurrentPosition(function(position){ 
       initialize(position.coords); 
      }, function(){ 
       $('#pos').html('Failed to detect Location.'); 
      }); 
    }); 
    </script> 
    </body> 
    </html>

在您的服務器，你需要一個PHP腳本「」 saveLocation.php「：

<?php 
$ausgabe=$_POST['longitude'].":".$_POST['latitude']; 
$datum=date("d.m.Y, H:i:s"); 
$array = file("location.log"); // Datei in ein Array einlesen 
array_unshift($array, "".$datum." ".$ausgabe."\n"); 
$string = implode("", $array); 
file_put_contents("location.log", $string); 

echo json_encode(array("success"=>"true")); 
?>

我使用jQuery來簡化一些常規的東西，比如通過AJAX發送數據或者更改元素的內部HTML

此代碼不在工作狀態，如果您只是複製/粘貼它

來源

2015-02-06 09:50:22 itd

保存HTML5位置信息的文件

回答

相關問題