リーフレットコントロールウィンドウにYouTube APIプレーヤーを追加する方法はありますか？

Question

私はgeoJSON層を含むチラシマップを作成しています。 geoJSONレイヤー上のポイントがクリックされると、そのポイントで識別されたYouTube動画（「youtube_id」フィールド）がリーフレットコントロールウィンドウで開きます。私は実際にビデオの再生時間を得ることができるようにしたいと思います。これを行う唯一の方法は、playback status functionsを使用してYouTube iframe APIを使用することです。

私は今マップを動作させる方法は、this tutorialのように、リーフレットコントロールウィンドウにiframeオブジェクトを追加することです。これはビデオを表示するために機能しますが、ビデオの再生中に再生時間を取得する方法はありません。ここに私のjavascriptの関連部分です：

var geoj = GeoJSON.parse(dat, {Point: ['lat', 'lon']}); 

var style = { 
    radius: 2, 
    fillColor: "darkred", 
    color: "darkred", 
}; 

var YT_id; 

var vidPlayer = L.control({position: 'bottomleft'}); 
vidPlayer.onAdd = function(mymap) { 
    this._div = L.DomUtil.create('div', 'vidPlayer'); 
    this.update(); 
    return this._div; 
}; 

vidPlayer.update = function (vidPopup) { 
    this._div.innerHTML = '<h4>USGS CMG Video</h4>' + (vidPopup ? '<b>' + vidPopup + '</b><br />' : 'Select a video'); 
}; 
vidPlayer.addTo(mymap); 

var vidPopup; 
function onEachFeature(feature, layer) { 
    layer.on('click', function(e) { 
     YT_id = feature.properties.youtube_id; 
     vidSec = feature.properties.video_second; 
     vidPopup = "<iframe id=\"player1\" src=https://www.youtube.com/embed/" + YT_id + "?start=" + vidSec + "&autoplay=1" + " width=\"600\" height=\"450\" frameborder=\"0\"></iframe>"; 
     vidPlayer.update(vidPopup); 
     lat = feature.geometry.coordinates[1]; 
     lng = feature.geometry.coordinates[0]; 
     var marker; 
     mymap.on('click', function (e) { 
      if (marker) { 
       mymap.removeLayer(marker); 
      } 
      marker = new L.Marker([lat,lng]).addTo(mymap); 
     }); 
     return YT_id; 
     console.log(vidSec); 
    }); 
} 

var polyline = L.geoJSON(geoj, { 
    onEachFeature: onEachFeature, 
    pointToLayer: function (feature, latlng) { 
     return L.circleMarker(latlng, style); 
    onEachFeature: onEachFeature; 
    } 
}).addTo(mymap); 

mymap.fitBounds(polyline.getBounds()); 

L.control.scale({position: 'bottomright'}).addTo(mymap); 

私は簡単にonEachFeature機能でvidPopupを変更することにより、これを行うことができるだろうと思った：

vidPopup = new YT.Player('player', { 
    height: '400', 
    width: '534', 
    videoID: YT_id, 
}); 

（に示すように、 YouTube iframe APIなど）、geoJSONポイントをクリックしても何も起こりません。私のブラウザのインス​​ペクタでは、YT_id変数にデータが取り込まれているのがわかりますが、は
X {b: Jb, a: null, h: null, closure_uid_691267473: 1, g: 1…}として返され、変数が渡されていないようです。

動画の再生時間をiframeオブジェクトで取得する方法や、適切なYouTube iframe APIをリーフレットコントロールウィンドウに追加する方法を知っている人はいますか？別のhtmlサイドパネルではなく、コントロールウィンドウを保持して、ビデオが再生されていないときに地図が見えるようにしたい - これは一番簡単な方法のようだ。

Answer 1

私はこの問題を解決でき、リーフレットコントロールウィンドウでyoutube-apiプレーヤーを開くことに成功しました。具体的

vidPlayer.onAdd = function(map) { 
    this._div = L.DomUtil.create('div', 'vidPlayer'); 
    this._div.id = "player"; 
    this.update(); 
    return this._div; 
}; 

this._div.id = "player";を追加：

にvidPlayer.onAdd機能を変更します。他の誰かが似た何かをしようとしているこの横切る念の

function onEachFeature(feature, layer) { 
layer.on('click', function(e) { 
    YT_id = feature.properties.youtube_id; 
    vidSec = feature.properties.video_second; 
    lat = feature.geometry.coordinates[1]; 
    lng = feature.geometry.coordinates[0]; 
    var marker; 
    map.on('click', function (e) { 
     if (marker) { 
      map.removeLayer(marker); 
     } 
     player = new YT.Player('player', { 
      height: '236.25', 
      width: '420', 
      videoId: YT_id, 
      playerVars: { 
       autoplay: 0, 
       start: vidSec, 
       rel: 0, 
      }, 
      events: { 
       'onReady': onPlayerReady, 
      } 
     }); 
     marker = new L.Marker([lat,lng]).addTo(map); 
    }); 
    return YT_id; 
    console.log(vidSec); 
}); 
}  
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

：

は、その後、私はへonEachFeature機能を変更しました。それが動作するとき、それはかなりクールです。