Question

所需输出：将视频附加到标记

已取得的成果：将标记放置在特定位置的基本谷歌地图代码

创意：使用定义的标记变量来附加视频

尝试使用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>

Answer 1

您基本上已经拥有了所有内容，只需要向video添加html5 InfoWindow元素，同时确保您的视频文件可以通过您的服务器访问。

Aaaand，只做了一些小改动：

＆＃13;

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);

＆＃13;

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

＆＃13;

修改

我使用的视频来自this页面

Answer 2

您可以通过添加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>

DEMO

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

2 个答案: