如何使用json和php在带有mapbox api的地图上移动标记? [英] How to move marker on a map with mapbox api using json and php?

问题描述

我正在使用mapbox api显示地图和方向.这很容易，而且效果很好.我想知道如何在不刷新页面的情况下更新地图上标记的位置.我阅读了页面和

I'm using mapbox api to display maps and directions. It's easy and it works well. I want to know how to update a marker's location on the map without refreshing a page. I read this page and this page in their documentation. I understand their examples but I'm not fully grasping how to implement realtime data in my codes without causing the page to refresh. Right now I have a script that updates the user location in the database every 15 seconds and returns longitude, latitude. I have the data now what? This is where I get highly confused. If you can help I would really appreciate. I have stripped down the codes for the sake of this question.

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>

geolocation.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);

geolocation.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);

推荐答案

您链接的文档资源很有帮助，但是我认为这

The documentation resources you've linked are helpful, but I think this add live realtime data example is even better for your use case. If you zoom out of the map to see a larger region of the world, you will see a blue rocket icon marker which moves every two seconds without refreshing the page. In essence, this is exactly what you're looking to do! I'll explain how the example is working so that you can use the same logic to update your own marker locations without refreshing the page as well.

此示例中的火箭图标已添加到带有源和图层的地图中.源指定所有基础数​​据(在这种情况下，，由 https://wanderdrone.appspot.com URL服务的更新GeoJSON)和 layer 指定应如何在地图上设置数据样式.如果您访问此URL，则每次刷新页面时都会看到 coordinates 进行更新.

The rocket icon in this example is added to the map with a source and layer. The source specifies all the underlying data (in this case, the updating GeoJSON served by the https://wanderdrone.appspot.com URL), and the layer specifies how that data should be styled on the map. If you visit this URL, you'll see that the coordinates update each time you refresh the page.

因此，下面的代码:

1. 每2秒从 url 获取GeoJSON.
2. 使用

1. Gets the GeoJSON from the url every 2 seconds.
2. Gets the map's 'drone' source using Map#getSource.
3. Sets the data used by the source in (2) to be the GeoJSON at the url using Map#setData.

window.setInterval(function() {
  map.getSource('drone').setData(url);
}, 2000);

您当前的实现是通过GL JS的 使用基于HTML的标记>标记 组件.因此，您可以使用 Marker#setLngLat 方法.这也不会刷新整个页面.

Your current implementation is using HTML-based markers via GL JS's Marker component. So, instead of switching to this source-and-layer based approach outlined above, you could use the Marker#setLngLat method each time the user's location updates in your database. This also will not refresh the whole page.

这篇关于如何使用json和php在带有mapbox api的地图上移动标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！