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

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 , все решил.

Sign In

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

Recommended Posts

vovchokig 35

Link to post

Share on other sites

NiTr0 584

Link to post

Share on other sites

vovchokig 35

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content

Browse

Activity