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

Question

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

Ste*_*eph 3 html javascript google-maps google-maps-markers

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

已经取得的成果:基本的谷歌地图代码,用于在特定位置放置标记

想法:使用定义的标记变量来附加视频

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

epo*_*och 6

你基本上已经拥有了所有东西,只需要添加一个html5 video元素InfoWindow,同时确保你的视频文件可以通过你的服务器访问.

Aaaand,只做了一些小改动:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

编辑

我使用的视频来自此页面

归档时间：	11 年，2 月前
查看次数：	2636 次
最近记录：	11 年，2 月前