使用Mapbox实时显示移动中的汽车位置

Question

我正在创建下面的系统，但遇到了问题。

如果有人知道解决方案，请告诉我。

我想做什么

(1) 每0.5秒更新一次汽车图标位置

(2) 每0.5秒更新一次汽车气球位置

(3) 在气球中嵌入youtube live

我正在上传我想要制作的图像。

我创建了一个函数来获取汽车的经度和纬度。（getCurrent（））

我已经成功更新了（1）中汽车图标的位置。

网址正在开发中

https://tsumesv.sakura.ne.jp/mapx/

问题

（2）中的气球显示在汽车图标上。

(3) youtube 显示屏闪烁。

mapboxgl.accessToken = 'xxxxxxxx';

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/xxxxxxxx', // style URL
    center: [129.86873906837, 32.752111886555], // nagasaki eki,
    zoom: 11.6,
    pitch: 0
});

// Symbol Layer
const symbolData = {
    'type': 'FeatureCollection',
    'features': []
};

map.on('load', function()
{
    map.loadImage(
        './images/car_red.png',
        (error, image) =>
        {
            if(error)
            {
                throw error;
            }
    
            map.addImage('iconA', image);
            map.addSource('point',
            {
                'type': 'geojson',
                'data': symbolData
            });
    
            map.addLayer(
            {
                'id': 'points',
                'type': 'symbol',
                'source': 'point',
                'layout':
                {
                    'icon-image': 'iconA',
                    'icon-size': 1,
                    'icon-allow-overlap': true,
                    'icon-ignore-placement': true,
                }
            });
        }
    );
});

// Speech bubble, car icon update
setInterval(() =>
{
    // get current
    var ret = getCurrent();
    var ret_json = JSON.parse(ret)
    var currentPoint = [parseFloat(ret_json.longitude), parseFloat(ret_json.latitude)]

    symbolData.features.splice(0);
    symbolData.features.push({
        'type': 'Feature',
            'geometry': {
            'type': 'Point',
            'coordinates': currentPoint
        }
    });

    var liveHtml = '<iframe width="220" height="205" src="https://www.youtube.com/embed/8YiKPHpqJ48" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'

    const popup = new mapboxgl.Popup({ closeOnClick: true })
    .setLngLat(currentPoint)
    .setHTML(liveHtml)
    .addTo(map);
    
    const dataSource = map.getSource('point');
    dataSource.setData(symbolData);

}, 500);

如有遗漏请联系我

谢谢。