从GPS获取当前标记位置并保存到mySQL

时间:2017-02-06 07:27:35

标签: php mysql google-maps geolocation gps

我有以下JS代码,形成这个代码,我需要将默认位置设置为我当前的GPS位置,

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 20
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});


google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

map.setCenter(myMarker.position);
myMarker.setMap(map);

并在设置完我的标记后(如果我需要更改位置),那么我需要一个按钮来提交,在提交按钮后它会保存到我的MySQL数据库中。 任何人都可以提供帮助吗?

1 个答案:

答案 0 :(得分:0)

您可以使用ajax调用将数据发布到服务器,然后服务器端在数据库中提供store di值

假设您有一个用于存储名为your_action_on_server.php的数据的服务器程序,您可以扩展拖动结束事件 这只是发送部分(你必须提供服务器端存储功能相关玩具你的数据库连接)

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
    $.post( 'your_action_on_server.php', { 
                   lat:evt.latLng.lat().toFixed(3),
                  lng: evt.latLng.lng().toFixed(3)                  
                },
                      function (data) { 
                      // you code for succcess from server
          });
  });

要获取当前位置,您可以使用地理定位对象api
有关详情,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

  if ("geolocation" in navigator) {
    /* geolocation is available */
  } else {
    /* geolocation IS NOT available */
  }

.....

  navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude);
  });