谷歌地图以 html 形式嵌入并在 MYSQL 数据库中保存用户选择的位置

Question

谷歌地图以 html 形式嵌入并在 MYSQL 数据库中保存用户选择的位置

我是一个新手，我正在尝试以 HTML 形式嵌入谷歌地图。此链接帮助我 http://www.w3schools.com/googleapi/google_maps_basic.asp 但它没有规定将用户选择的位置保存在数据库中。那可能吗？如果是这样，我该如何实施？我真的很感谢你们的帮助。

这是html

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>



<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
document.getElementById('lat').value= 51.508742
document.getElementById('lng').value= -0.120850  

// marker drag event
google.maps.event.addListener(marker,'drag',function(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
});

//marker drag event end
google.maps.event.addListener(marker,'dragend',function(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
});
}

google.maps.event.addDomListener(window, 'load', initialize);


</script>

</head>

<body>

<form action="maps.php" method="post">
    Select your location
    <input type='hidden' name='lat' id='lat'>  
    <input type='hidden' name='lng' id='lng'> 
    <input type="submit" value="Submit">
</form>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body> 
</html>

Run Code Online (Sandbox Code Playgroud)

这是用于检索变量“lat”和“lng”的maps.php文件

<?php

$lat = $_POST['lat'];
$lng = $_POST['lng'];

echo "Latitude is" .$lat. "and longitude is" .$lng;

?>

Run Code Online (Sandbox Code Playgroud)

我每次在 maps.html 中都得到一个固定的经度和纬度值。怎么不更新了？

Answer 1

vip*_*iya 5

您可以将隐藏字段带入您的 html 表单并通过javascript. 尝试如下。

HTML：

<input type='hidden' name='lat' id='lat'>  
<input type='hidden' name='lng' id='lng'>

Run Code Online (Sandbox Code Playgroud)

JS：

<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
    document.getElementById('lat').value= 51.508742
    document.getElementById('lng').value= -0.120850  

    // marker drag event
    google.maps.event.addListener(marker,'drag',function(event) {
        document.getElementById('lat').value = event.latLng.lat();
        document.getElementById('lng').value = event.latLng.lng();
    });

    //marker drag event end
    google.maps.event.addListener(marker,'dragend',function(event) {
        document.getElementById('lat').value = event.latLng.lat();
        document.getElementById('lng').value = event.latLng.lng();
    });
}

google.maps.event.addDomListener(window, 'load', initialize);


</script>

Run Code Online (Sandbox Code Playgroud)

注意：由于 google 提供了许多事件侦听器，因此您可以根据需要使用。这是参考链接，只需查看并根据您的要求使用即可。参考

JSFIDDLE 演示

归档时间：	10 年，3 月前
查看次数：	8004 次
最近记录：	10 年，3 月前