谷歌地图API v3:YoutTube视频不会在信息窗口中播放.我得到一个空白窗口

我正在尝试将YouTube视频放入infowindows中，但它不起作用。我只得到空窗户。

这是我的代码。由于这是我的第一个Javascript项目，我确信我做错了什么。你能帮我找到问题所在吗？

我在Chrome和Firefox上尝试过。

   <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
  <div id="map"></div>

  <script>
  function initMap(){
    // Map options
    var centerCoords = new google.maps.LatLng(52.2799, 8.0472);
    var options = {
      zoom:8,
      center:centerCoords,
      mapTypeId: google.maps.MapTypeId.TERRAIN    // satellite, hybrid, terrain, roadmap
    }
    // New map
    var map = new google.maps.Map(document.getElementById('map'), options);
    // Listen for click on map
    google.maps.event.addListener(map, 'click', function(event){
      // Add marker
      addMarker({coords:event.latLng});
    });
    // Array of markers
    var markers = [
      {
        coords: new google.maps.LatLng(52.2799, 8.0472),
        //content:'<h1> Osnabrueck </h1>',
        url: getYoutubeId('https://www.youtube.com/r6UbYB5yMX8'),
        //iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
      }  
    ];

    var any_window =false;
    for(var i = 0;i < markers.length;i++){
      // Add marker
      addMarker(markers[i], any_window);
    }
    function addMarker(props, any_window){
      var marker = new google.maps.Marker({
        position:props.coords,
        map:map,
        //icon:props.iconImage
      });
      // Check for customicon
      if(props.iconImage){
        // Set icon image
        marker.setIcon(props.iconImage);
      }
      // Check content
      if(props.url){
        var infoWindow = new google.maps.InfoWindow({
          embed_url: "https://www.youtube.com/embed/" + props.url,
          content: '<video controls="" style="height:350px; width:600px;><iframe title="YouTube video player">'
           + '<type="text/html" allow="autoplay; encrypted-media" src=embed_url frameborder="0" allowfullscreen></iframe></video>'
        });
        marker.addListener('click', function(){  //click, mouseover, mouseout
          if (!any_window){
            infoWindow.open(map, marker);
            any_window = true;
          }
        });
      } // end if props.content
    } //addMarker
//################ get youtube id function ######################
    function getYoutubeId(url){
      var videoid = url.match(/(?:https?:/{2})?(?:w{3}.)?youtu(?:be)?.(?:com|be)(?:/watch?v=|/)([^s&]+)/);
      if(videoid == null) {
        console.log(url + " is not a valid YouTube url");
      }
        return videoid[1];
      };
//###############################################################
  } //initMap
  </script>
  <!--  ###########################################################  -->
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=***API_KEY***&callback=initMap">
    </script>
</body>
</html>

我更改了此代码：

var infoWindow = new google.maps.InfoWindow({
    embed_url: "https://www.youtube.com/embed/" + props.url,
    content: '<video controls="" style="height:350px; width:600px;><iframe title="YouTube video player">'
       + '<type="text/html" allow="autoplay; encrypted-media" src=embed_url frameborder="0" allowfullscreen></iframe></video>'
});

自：

var embed_url = "https://www.youtube.com/embed/" + props.url;
var infoWindow = new google.maps.InfoWindow({
    content: '<iframe title="YouTube video player" type="text/html" allow="autoplay; encrypted-media" src=' + embed_url + ' frameborder="0" allowfullscreen></iframe>'
});

我embed_url 做了一个变量，而不是 InfoWindowOptions 对象的属性。然后，我使用字符串串联将其值添加到信息窗口内容：src=' + embed_url + ' 。

这仅修复了最初在地图上的标记的信息窗口。

您必须修改代码，以便为单击地图时创建的其他标记加载视频。

相关内容

最新更新

热门标签：