Камеры на карту

vovchokig · 2019-03-31 07:24:29

Захотелось создать интерактивную карту камер. С базы данных выбираются локации, маркеры виставляются, в модальном окне проигрывает стрим.

Но только один стрим. Нужно в стоке 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>

NiTr0 · 2019-03-31 19:34:05

а в чем проблема? берете перед вызовом create_marker и меяете. если есть сомнения в корректности - console.info() или браузерный дебаггер в помощь (хром умеет даже править js).

а лучше - сразу выдавать правильный урл в коде, который генерит сами точки (тот самый пхп, да).

vovchokig · 2019-04-01 17:23:20

Спасибо NiTr0 , все решил.

Увійти

Камеры на карту

Рекомендованные сообщения

vovchokig 35

Ссылка на сообщение

Поделиться на других сайтах

NiTr0 584

Ссылка на сообщение

Поделиться на других сайтах

vovchokig 35

Ссылка на сообщение

Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Создать аккаунт

Вхід

Зараз на сторінці 0 користувачів

Схожий контент

Спільнота

Активність