保存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位置信息的文件

回答

相关问题