-
Зараз на сторінці 0 користувачів
Немає користувачів, що переглядають цю сторінку.
-
Схожий контент
-
Від vovchokig
Захотелось создать интерактивную карту камер. С базы данных выбираются локации, маркеры виставляются, в модальном окне проигрывает стрим.
Но только один стрим. Нужно в стоке url: 'rtmp://192.168.51.102:1935/static/camera-Magazin', подставить вместо camera-Magazin, переменную MapTitle.
Может кто подскажет как? Или есть готовый код...
<!DOCTYPE html> <html> <head> <title>Google Map</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB3NCh3AK7mdJXpSMRZvsRr17Ne9ix2Hn0&sensor=false"></script> <script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var mapCenter = new google.maps.LatLng(50.181338, 30.140504); //Google map Coordinates var map; map_initialize(); // initialize google map //############### Google Map Initialize ############## function map_initialize() { var googleMapOptions = { center: mapCenter, // map center zoom: 15, //zoom level, 0 = earth view to higher value //maxZoom: 18, //minZoom: 16, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL //zoom control size }, scaleControl: true, // enable scale control mapTypeId: google.maps.MapTypeId.ROADMAP // google map type }; map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions); //Load Markers from the XML File, Check (map_process.php) $.get("map_process.php", function (data) { $(data).find("marker").each(function () { var name = $(this).attr('name'); var address = '<p>'+ $(this).attr('address') +'</p>'; var type = $(this).attr('type'); var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng'))); create_marker(point, name, address, false, false, false, "icons/pin_blue.png"); }); }); } //############### Create Marker Function ############## function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath) { //new marker var marker = new google.maps.Marker({ position: MapPos, map: map, draggable:DragAble, animation: google.maps.Animation.DROP, title:MapTitle, icon: iconPath }); var infowindow = new google.maps.InfoWindow(); /*Google Map Marker Click Function*/ google.maps.event.addListener(marker, 'click', (function(marker) { return function() { /*Bootstrap Modal Pop Up Open Code*/ $(".modal-title").text(MapTitle); $(".modal-body").text("Modal Body"); $("#myModal").modal('show'); } })(marker)); } }); </script> </head> <body> <h1 class="heading">My Google Map</h1> <div align="center">Right Click to Drop a New Marker</div> <div id="google_map"></div> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"></h4> </div> <div id="wowza" style="width:100%;height:276px;margin:0 auto;text-align:center; background-color: red;"> </div> <script src="http://XXXXX.net.ua/wp-content/uploads/flowplayer/flowplayer-3.2.6.min.js"></script> <script> $f("wowza", "http://XXXXX.net.ua/wp-content/uploads/flowplayer/flowplayer-3.2.7.swf", { clip: { scaling: 'fit', url: 'rtmp://192.168.51.102:1935/static/camera-Magazin', autoBuffering: false, bufferLength: 1, provider: 'rtmp', autoPlay: 'false', duration: 300 }, plugins: { controls: { url: 'http://XXXXX.net.ua/wp-content/uploads/flowplayer/flowplayer.controls-3.2.5.swf', play: true, volume: true, mute: true, time: true, stop: true, fullscreen: true, scrubber: true, width: '100%', left: '1px', backgroundColor: 'rgba(0, 0, 0, 0)', backgroundGradient: 'none', volumeColor: '#4599ff', tooltipColor: '#000000', tooltipTextColor: '#ffffff' }, rtmp: { url: 'http://XXXXX.net.ua/wp-content/uploads/flowplayer/flowplayer.rtmp-3.2.3.swf' //netConnectionUrl: 'rtmp://192.168.51.102:1935/static' } } } ); // </script> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>
-
Рекомендованные сообщения
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Зарегистрировать аккаунтВхід
Уже зарегистрированы? Войдите здесь.
Войти сейчас