使用PHP在MYSQL数据库中存储地理位置

时间:2019-05-14 23:40:52

标签: javascript php jquery ajax

我的网站使用GEO位置加载用户的当前位置,然后在他们单击按钮时将其显示在Google地图上,我希望它将坐标存储在数据库中。

我已经完成了GEO定位并在地图上显示了坐标,我只需要从JS中获取值并将它们存储在[{'url': 1, 'author': 'hello'}, {'url': 2, 'author': 'bye'}] 语句内的数据库中

javascript

if(isset($_POST['newPost']))

HTML

 <script>
        var map, infoWindow;
        function initMap() 
        {
            map = new google.maps.Map(document.getElementById('map'), 
            {
                center: {lat: -34.397, lng: 150.644},
                zoom: 10
            });
            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) 
            {
                navigator.geolocation.getCurrentPosition(function(position) 
                {
                    var pos = 
                    {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    infoWindow.open(map);
                    map.setCenter(pos);
                }, function() 
                {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } 
            else 
            {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) 
        {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');

            infoWindow.open(map);
        }
    </script>

PHP

<form id="newPost" action="index.php" method="Post">
<textarea id="txtMessage" name="body"></textarea>
<hr/>
<br/>
<br/>
<div id="map" style="width:100%;height:400px;"></div>
<br/>
<button type="submit" id="postButton" name="newPost" class="Button">Post! 
</button>
</form>

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

由于无法进行测试,我不得不做出一些猜测。我没有看到任何创建的标记,因此我假设您正在使用地图坐标。请考虑以下内容:

python3.7 -m pip install <module>

https://jsfiddle.net/Twisty/wzvpnmh6/21/

这将创建POST数据,例如:

$(function() {
  var map, infoWindow;

  function initMap() {
    map = new google.maps.Map($('#map')[0], {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 10
    });
    infoWindow = new google.maps.InfoWindow();

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
      'Error: The Geolocation service failed.' :
      'Error: Your browser doesn\'t support geolocation.');

    infoWindow.open(map);
  }

  $("#newPost").submit(function(e) {
    e.preventDefault();
    var pData = {
      body: $("#txtMessage").val(),
      lng: map.coords.longitude,
      lat: map.coords.latitude
    };
    $.post($(this).attr("action"), pData);
  });
});

您还可以将其字符串化并作为组合字符串发送:

{
  body: "Hello World",
  lat: -34.397,
  lng: 150.644
}

然后您将得到一个像var coords = JSON.Stringify({ lat: c.lat(), lng: c.lng() }); 这样的字符串,可以直接将其添加到数据库中。这取决于您,并将由您需要对数据进行定义。如果您需要搜索特定的纬度或经度,则它们将存储在自己的列中。如果您只需要地理位置,则它们可以放在一列中。

希望有帮助。

参考文献: