Сохранение географического местоположения в базе данных MYSQL с помощью PHP

Question

Мой веб-сайт загружает текущее местоположение пользователя, используя местоположение GEO, и отображает его на карте Google, когда они затем нажимают кнопку. Я хочу, чтобы он сохранял координаты в базе данных.

Я уже сделал GEOрасположение и отображение координат на карте, мне просто нужно взять значения из JS и сохранить их в базе данных внутри оператора if(isset($_POST['newPost']))

javascript

 <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>

HTML

<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>

PHP

if(isset($_POST['newPost']))
{
    DB::query('INSERT INTO heatmap(lon, lan) VALUES (:lon, :lan)', 
        array(':lon'=>$VAL, ':lan'=>$VAL));
}

Буду признателен за любую помощь

Answer 1

Не имея возможности проверить это, мне пришлось сделать некоторые предположения. Я не вижу созданных маркеров, поэтому я предполагаю, что вы используете координаты карты. Учтите следующее:

$(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);
  });
});

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

Это создаст POST-данные вроде:

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

Вы также можете Stringify и отправить его в виде комбинированной строки:

var coords = JSON.Stringify({ lat: c.lat(), lng: c.lng() });

Затем вы получите строку типа: {"lat":-34.397,"lng":150.644}, которую можно добавить непосредственно в БД. Это зависит от вас и будет зависеть от того, что вам нужно делать с данными. Если вам нужно найти конкретные значения Lat или Long, они будут храниться в своих собственных столбцах. Если вам просто нужна геолокация, то они могут быть в одном столбце.

Надеюсь, это поможет.

Ссылки:

• Функция API Карт Google map.getCenter ()
• https://developers.google.com/maps/documentation/javascript/mysql-to-maps