如何在mysqli数据库中存储纬度和经度

时间:2018-03-24 17:41:58

标签: javascript php html google-maps mysqli

我想存储此javascript代码的纬度和经度值

function initialize() {
    var myLatlng = new google.maps.LatLng(26.329086,50.227570);
    var myOptions = {
        zoom:12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("gmap"), myOptions);
    // marker refers to a global variable
    marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    // if center changed then update lat and lon document objects
    google.maps.event.addListener(map, 'center_changed', function () {
        var location = map.getCenter();
         document.getElementById("lat").innerHTML = location.lat();
        var lon = document.getElementById("lat").innerHTML;
        document.getElementById("lon").innerHTML = location.lng();


        // call function to reposition marker location
        placeMarker(location);
    });
    // if zoom changed, then update document object with new info
    google.maps.event.addListener(map, 'zoom_changed', function () {
        zoomLevel = map.getZoom();
        document.getElementById("zoom_level").innerHTML = zoomLevel;
    });
    // double click on the marker changes zoom level
    google.maps.event.addListener(marker, 'dblclick', function () {
        zoomLevel = map.getZoom() + 1;
        if (zoomLevel == 20) {
            zoomLevel = 10;
        }
        document.getElementById("zoom_level").innerHTML = zoomLevel;
        map.setZoom(zoomLevel);
    });

    function placeMarker(location) {
        var clickedLocation = new google.maps.LatLng(location);
        marker.setPosition(location);
    }
}
window.onload = function () { initialize() };

并且值通过范围

显示在html代码中
<div id="gmap">
<span id="lat"></span>
<span id="lon"></span>

当用户在地图上移动标记并且我想将它们传递给将其插入数据库的php代码时,值会动态变化。

3 个答案:

答案 0 :(得分:0)

您可以使用ajax / jquery从span获取信息并将数据发送到服务器进行保存(请注意,您可以在纯JavaScript中执行此操作但需要更多代码,另一种选择是使用{{ 1}}提交方法)。

代码简介(未经测试):

(点击或超时功能)

<form>...</form>

希望这有助于您入门。

答案 1 :(得分:-1)

我认为你得到了部分答案。你问过,“我如何通过 $ _ POST $ _ GET 来处理服务器内的请求”  var formdata =“lat =”+ $('#lat')。text()+'&amp; lon ='+ $('#lon')。text();

我将分享以上代码以实现您的答案。如果您的表单有和id属性 target_form ,请使用下面的代码

this.addUnit = function(unit_prefixV, unit_nameV, unit_descriptionV, profile_id) {
         return new Promise(function(resolve, reject) {
             knex.insert({ unit_prefix: unit_prefixV, unit_name: unit_nameV, unit_description: unit_descriptionV })
                .into('units').then(function(unit) {
                    knex('users').where({ "google_id": profile_id }).select('id').then(function(uid) {
                        knex.insert({ user_id: uid, unit_id: unit }).into('users_units').then(function(user_units) {
                            resolve(user_unit)
                        }).catch(function(error) {
                            reject(error)
                        })
                        resolve(uid)
                    })
                    console.log(unit)
                    resolve(unit)
                }).catch(function(error) {
                    reject(error)
                })
         })
    }

所以转到你的save_location.php文件并通过isset函数检查它以跳过不需要的错误,如

 $( "#target_form" ).submit(function( ) {
     $.ajax({
          type: 'POST',
          url: 'save_location.php',
          data: formdata, //we are passing lat and lon to server
          async: false,
        }).done(function(data) {
           alert(data)
        });
  });

答案 2 :(得分:-1)

所以你可以使用

$( "#target_form" ).submit(function( ) {
    var lat = "7847.343"; //garbage data
    var lon = "85.125"; //garbage data

     $.ajax({
          type: 'POST',
          url: 'save_location.php',
          data: {
               "lat": lat,
               "lon": lon
            } //we are passing lat and lon to server
          async: false,
        }).done(function(data) {
           alert(data)
        });
  });