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 merge函数占用内存过大
  • ¥15 Revit2020下载问题
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 单片机无法进入HAL_TIM_PWM_PulseFinishedCallback回调函数
  • ¥15 Oracle中如何从clob类型截取特定字符串后面的字符
  • ¥15 想通过pywinauto自动电机应用程序按钮,但是找不到应用程序按钮信息
  • ¥15 如何在炒股软件中,爬到我想看的日k线
  • ¥15 seatunnel 怎么配置Elasticsearch
  • ¥15 PSCAD安装问题 ERROR: Visual Studio 2013, 2015, 2017 or 2019 is not found in the system.