douyan1972
2015-07-10 13:47
浏览 35
已采纳

Google Maps嵌入html表单并在MYSQL数据库中保存用户选择的位置

I am a newbie and I am trying to embed google maps in an HTML form. This link helped me http://www.w3schools.com/googleapi/google_maps_basic.asp but it had no provision for saving user selected location in database. Is that possible? If so, how can I implement it? I really appreciate help from you guys.

Here is the 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>

and here is the maps.php file which is used to retrieve the variables "lat" and"lng"

<?php

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

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

?>

I am getting a fixed value of longitude and latitude every time in maps.html. Why doesn't it update?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doucha4054 2015-07-10 13:53
    已采纳

    You can take hidden field into your html form and set value by javascript. try as below.

    HTML:

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

    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>  
    

    Note: As google provide many event listeners so you can use as per your need. Here is the reference link just check it out and use as per your requirements. Reference

    JSFIDDLE DEMO

    点赞 打赏 评论

相关推荐 更多相似问题