使用谷歌地图API将视频附加到标记

Question

使用谷歌地图API将视频附加到标记

javascripthtmlgoogle-mapsgoogle-maps-markers

3

期望输出：将视频附加到标记

已实现的内容：基本的谷歌地图代码，用于在特定位置放置标记

思路：使用定义的标记变量附加视频

尝试使用Infowindow，但它不显示视频。请注意，视频与包含代码的文件位于同一文件夹中。有人能帮忙吗？

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?&sensor=false">
</script>

<script>

   function initialize()
   {
        var mapProp = {
            center:new google.maps.LatLng(-20.240154, 57.589669),
            zoom:10,
            mapTypeId:google.maps.MapTypeId.ROADMAP
   };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var curepipe=new google.maps.Marker({
    position: new google.maps.LatLng(-20.318813, 57.524149)
});

curepipe.setMap(map);
var infowindow = new google.maps.InfoWindow({
      content:"Hello World!"
});

 infowindow.open(map,marker);
 }

  }

   google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>

- Steph

我已经成功地使用iFrame作为InfoWindow的内容：<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>！ - yesman

您刚刚将视频添加到网站上了吗？还是将视频附加到了标记上？ - Steph

不，这个视频只是调用了一个不同的网站的HTML。请查看其他答案获取更多信息。 - yesman

2个回答

1

您可以通过添加一个 iframe 来实现此功能；

尝试一下：

   function initialize() {

      var mapProp = {
          center: new google.maps.LatLng(-20.240154, 57.589669),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp)
      var curepipe = new google.maps.Marker({
          position: new google.maps.LatLng(-20.318813, 57.524149)
      });

      curepipe.setMap(map);
      var infowindow = new google.maps.InfoWindow({
          content: '<iframe title="YouTube video player" type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/0vrdgDdPApQ?rel=0" frameborder="0"></iframe>'
      });

      infowindow.open(map, curepipe);
}

HTML：

 <div id="googleMap" style="width: 100%; height: 100%"></div>

演示

- laaposto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- epoch · Accepted Answer

您已经基本完成了所有工作，只需要向 InfoWindow 添加一个 html5 的 video 元素，并确保您的视频文件可以通过您的服务器访问即可。

只需进行一些小改动：

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(-20.240154, 57.589669),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var curepipe = new google.maps.Marker({
    position: new google.maps.LatLng(-20.318813, 57.524149)
  });

  curepipe.setMap(map);

  var infowindow = new google.maps.InfoWindow({
    content: '<video controls="" style="width:100px;height:100px;" poster="poster.png">' +
    '<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm;">' +
    '<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;">' +
    '</video>'
  });

  infowindow.open(map, curepipe);
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<div id="googleMap" style="width:500px; height:500px;"></div>

编辑

我使用的视频来自这个页面