Как переместить маркер на карте с помощью mapbox api, используя json и php? - PullRequest
Новая
       76

Как переместить маркер на карте с помощью mapbox api, используя json и php?

1 голос
/ 16 февраля 2020

Я использую mapbox api для отображения карт и направлений. Это легко и хорошо работает. Я хочу знать, как обновить местоположение маркера на карте, не обновляя страницу. Я прочитал эту страницу и эту страницу в их документации. Я понимаю их примеры, но я не совсем понимаю, как реализовать данные в реальном времени в моих кодах, не заставляя страницу обновить sh. Прямо сейчас у меня есть скрипт, который обновляет местоположение пользователя в базе данных каждые 15 секунд и возвращает долготу, широту. У меня есть данные, что теперь? Это где я очень запутался. Если вы можете помочь, я был бы очень признателен. Ради этого вопроса я сократил коды.

map. html

   <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
    <script type="text/javascript" src="geolocation.js"></script>

    <!--Display map-->
    <div id="map"></div>

    <!--mapbox script-->
    <script>
    mapboxgl.accessToken ='pk.xxxxxxxx';
                var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v11',
                center:[$longitude,$latitude],
                zoom: 15
                });
                var geojson = {
                    type: 'FeatureCollection',

                    features: [{
                        type: 'Feature',
                        geometry: {
                        type: 'Point',
                        coordinates:[$longitude,$latitude]
                        },
                        properties: {
                        title: '',
                        description: ''
                        }}]
                    };

                    geojson.features.forEach(function(marker) {
                    var el = document.createElement('div');
                    el.className = 'marker';
                    new mapboxgl.Marker(el)
                    .setLngLat(marker.geometry.coordinates)
                    .setPopup(new mapboxgl.Popup({ offset: 25 }) 
                    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
                    .addTo(map);
                    });
     </script>

геолокация. js 

setInterval(function () {
$.get("https://ipinfo.io", function (response) {

    //variables
    var user_id = $('.userid').val();
    var geoLocation = response.loc;

    //build array
    var values ='geoLocation=' + encodeURIComponent(geoLocation)
    + '&userid=' + encodeURIComponent(user_id);

    $.ajax({
    type: 'POST',
    url: 'https://mywebsite.com/mobile/geolocation.php',
    data: values,
    success: function (data) {


    //returns new longitude
    var lon = data.longitude;

    //returns new latitude
    var lat = data.latitude;

    }
    });
}, "jsonp");
}, 15000);

геолокация. php

$geoLocation= mysqli_real_escape_string($conn,$_POST['geoLocation']);//coordinates
$userid= mysqli_real_escape_string($conn,$_POST['userid']);//userid

//split coordinates into lat and longitude
$longitude = substr($geoLocation, strpos($geoLocation, ",") + 1); //put it first
$latitude =preg_replace('/^([^,]*).*$/', '$1', $geoLocation);  // put it second

//insert new coordinates
$insertgeo = $conn->prepare("INSERT INTO user_geolocation (latitude,longitude,userid)  VALUES(?,?,?)");
$insertgeo->bind_param("sss",$latitude,$longitude,$userid);
$insertgeo->execute();
$insertgeo->close();

//return answer to json
$result = array('message' => 'success',
                'userid'=>$userid,
                'longitude'=>$longitude,
                'latitude'=>$latitude);
header('Content-Type: application/json');
echo json_encode($result);

1 Ответ

0 голосов
/ 13 марта 2020

Связанные с вами ресурсы документации полезны, но я думаю, что этот пример добавления реальных данных в реальном времени еще лучше для вашего варианта использования. Если вы уменьшите масштаб карты, чтобы увидеть большую область мира, вы увидите синий значок маркера ракеты, который перемещается каждые две секунды без обновления страницы. По сути, это именно то, что вы хотите сделать! Я объясню, как работает пример, чтобы вы могли использовать ту же логику c для обновления ваших собственных местоположений маркеров без обновления страницы.

Значок ракеты в этом примере добавляется на карту с источником и слоем. Источник определяет все базовые данные (в данном случае обновленный Geo JSON, обслуживаемый URL-адресом https://wanderdrone.appspot.com), а слой определяет, как эти данные должны быть оформлены на карте. Если вы зайдете по этому URL, вы увидите, что coordinates обновляется каждый раз, когда вы обновляете sh страницу.

Итак, код ниже:

  1. Получает Geo JSON из url каждые 2 секунды.
  2. Получает источник карты 'drone', используя Map#getSource.
  3. Устанавливает данные, используемые источником в (2), в качестве Geo JSON в url, используя Map#setData. 
window.setInterval(function() {
  map.getSource('drone').setData(url);
}, 2000);

Ваша текущая реализация использует маркеры на основе HTML через компонент GL JS Marker. Таким образом, вместо того, чтобы перейти к описанному выше подходу на основе источников и слоев, вы можете использовать метод Marker#setLngLat каждый раз, когда местоположение пользователя обновляется в вашей базе данных. Это также не обновляет sh всю страницу.

...