视频与Javascript中的地图同步

Question

我希望将视频与使用HTML导入的地图同步，并且我的代码部分运行良好。尽管此代码使用的是浏览器中尚未广泛支持的addTextTrack，因此它不是＆ ＃34;全球＆＃34;解决方案。我想要做的是我有一个带有几秒视频的.xml文件，每秒与一个坐标匹配。我读了这个文件并构建了cues。当视频改变了oncuechange函数被调用时和地图与视频同步。问题是如何替换addTextTrack或者是否存在每秒视频调用的视频方法。

video.addEventListener("loadedmetadata", function(){
    var videoOffset = 1331363000;
    var track = video.addTextTrack("metadata", "GBike track", "en");
    track.mode = "hidden";
    track.oncuechange = function(){
        // "this" is a textTrack
        var cue = this.activeCues[0]; // there is only one active cue in this example
        if (typeof cue === "undefined") {
            return;
        }
        var point = JSON.parse(cue.text);
        var newLatLng = new google.maps.LatLng(point.lat, point.lng);
        if (!map.getBounds().contains(newLatLng)){
            map.setCenter(newLatLng);
        }
        var oldLatLng = marker.getPosition();
        var heading = getHeading(oldLatLng, newLatLng);
        var pov = {
            "heading": heading,
            "pitch": panorama.getPov().pitch,
            "zoom": panorama.getPov().zoom
        }
        panorama.setPov(pov);
        panorama.setPosition(newLatLng);
        marker.setPosition(newLatLng);

        //displayTime(point.t * 1000);
    };


    var points = [];




    jQuery.ajax({
        type: "GET",
        url: "data/gbike copy 2.xml",
        dataType: "xml",


        success: function(xml) 
        {



            jQuery(xml).find('p').each(function(){
                var lat = parseFloat(jQuery(this).attr('a'));
                var lng = parseFloat(jQuery(this).attr('b'));
                var t = parseInt(jQuery(this).attr('t'));
                points.push({"lat": lat, "lng": lng, "t": t});
            });

            var path = [], latSum = 0, lngSum = 0;
            for (var i = 0; i !== points.length; ++i) { // not very efficient...
                var point = points[i];
                latSum += point.lat;
                lngSum += point.lng;
                path.push(new google.maps.LatLng(point.lat, point.lng));
                var startTime = point.t - videoOffset;
                var endTime = i === points.length - 1 ?
                    video.duration : points[i+1].t - videoOffset;
                track.addCue(new (window.VTTCue || window.TextTrackCue)(startTime, endTime, JSON.stringify(point))); // change in spec



            }


            var startLatLng = new google.maps.LatLng(points[0].lat, points[0].lng);
            var options = {

                center: startLatLng,
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };

            map = new google.maps.Map(document.getElementById("map"), options);

            var panoramaOptions = {
                position: startLatLng,
                pov: {
                    heading: 332, // hack :)
                    pitch: 10,
                    zoom: 1
                }
            };
            panorama = new google.maps.StreetViewPanorama(document.getElementById("panorama"), panoramaOptions);
            map.setStreetView(panorama);

            var polyline = new google.maps.Polyline({
                path: path,
                strokeColor: "#ff0000",
                strokeOpacity: 0.2,
                strokeWeight: 5
            });
            polyline.setMap(map);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(points[0].lat, points[0].lng),
                map: map,
                title:"gbike!"
            });
            google.maps.event.addListener(map, 'click', function(event) {
                var min = 360; // good enough...
                var nearest;
                clickLat = event.latLng.lat();
                clickLng = event.latLng.lng();
                for (var i = 0; i != points.length; ++i){
                    var pointLat = points[i].lat;
                    var pointLng = points[i].lng;
                    var distance = Math.sqrt(Math.pow(clickLat - pointLat, 2) + Math.pow(clickLng - pointLng, 2));
                    if (distance < min){
                        min = distance;
                        nearest = i;
                    }
                }
                var point = points[nearest];
                var latLng = new google.maps.LatLng(point.lat, point.lng);
                if (!map.getBounds().contains(latLng)){
                    map.setCenter(latLng);
                }
                marker.setPosition(latLng);
                video.currentTime = point.t - videoOffset + 1;
            });
        },
        error: function() {

            alert("An error occurred while processing XML file.");

        }

    });


}); // video loadedmetadata