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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作