当谷歌地图标记移动时更新mysql数据库

Update mysql database when google map marker move

本文关键字：更新 mysql 数据库 移动 谷歌 地图 图标      更新时间：2023-09-26

好吧，我有一个谷歌地图，其中所有的纬度和经度都来自DB，它用标记显示每个位置。标记是可移动的。

现在我想在移动每个标记时更新纬度和经度的数据库。 使用PHP或JavaScript或Ajax是否可能。你能给我一个解决方案或建议吗？谢谢。

Javascript代码： 

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>        
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" 
type="text/javascript"></script>
<script type="text/javascript" src="gmap3.js"></script>    
<script type="text/javascript">
  $(function(){
    $('#map').gmap3({
      map:{
        options:{
          center:[23.709920999999998,90.40714299999999],
          zoom: 15
        }
      },
      marker:{
        values:[            
        <?php
        $sql = mysql_query("select * from parkings where userid != '0'");
        while($res = mysql_fetch_array($sql)){
                            $id = $res['locId'];
            $lat = $res['latitude'];
            $long = $res['longitude'];              
            ?>
            {address:"<?php echo $lat;?>,<?php echo $long;?>"},
            <?php
            }
        ?>                               
        ],
        options:{
          draggable: true
        },
        events: {
          click: function(marker, event, context){
            markerSelected(context.id);
          }
        }
      }
    });
    $("#bcolor").click(function(){
      var marker = $('#map').gmap3({get: $("#markerId .value").text() });
      marker.setIcon(marker.getIcon() ? "" : "http://maps.google.com/mapfiles
/marker_green.png");
    });
    $("#bremove").click(function(){
      $('#map').gmap3({clear: $("#markerId .value").text() });
      $("#data").hide();
      $("#title").show();
    });
  });
  function markerSelected(id){
    var marker = $('#map').gmap3({get:id});
    $("#markerId .value").text(id);
    $("#latitude .value").text(marker.getPosition().lat());
    $("#longitude .value").text(marker.getPosition().lng());
    $("#data").show();
    $("#title").hide();
  }
</script>

正文部分代码

<div id="map" class="gmap3"></div>

当我单击每个标记时，它会显示以下部分的纬度和经度：

<div id="latitude">
        <span class="label">Latitude : </span>
        <span class="value"></span>
      </div>
      <div id="longitude">
        <span class="label">Longitude : </span>
        <span class="value"></span>
      </div>

当您移动标记时，您可以使用 jQuery 获取新的纬度和经度值。

只需在包含以下值的标签中添加一个 ID：

<div id="latitude">
    <span class="label" id="gmap_latitude">Latitude : </span>
    <span class="value"></span>
</div>
<div id="longitude">
    <span class="label" id="gmap_longitude">Longitude : </span>
    <span class="value"></span>
</div>

因此，您可以使用jQuery轻松选择它们并获取它们的值。

现在，为了更新数据库，

我建议创建一个更新数据库的PHP脚本，并在每次更新标记时使用带有jQuery加载函数（http://api.jquery.com/jQuery.post/）的AJAX调用。您可以使用 jQuery 事件处理程序跟踪此情况。

相关文章：