Форум

greck6 · #1 (**permalink**) 07.02.2014, 12:20

Есть сервер для авиасимулятора FSX и есть файл whazzup.txt

![DateStamp]05/02/2014 08:07
!GENERAL
VERSION = 1
RELOAD = 1
UPDATE = 20140205080726
CONNECTED CLIENTS = 1
CONNECTED SERVERS = 1
!CLIENTS
GLP049:5084479:Iliya UUDD:PILOT::59.820550:70.177150:7547:188:T/B738/F:470:UUWW:FL320:ULLI:GBS:1:1:2200:0:40:3:I:830:949:1:15:2:30:::WT GEKLA DAKLO SF R480 GAMDI W11 NE G476 SU B210 LUKIR:::::::20140205081440
!SERVERS
GBS:95.84.228.66:Russia:Russia:1

в нём имеются координаты которые нужно использовать для размещения маркеров на google maps, этот файл динамически изменяется сервером, есть парсер этого файла на PHP, тоесть координаты парсятся и помещаются в переменную PHP
но вот передать значение этой переменной в javascript у меня ни как ни выходит.

<?php
$file = file_get_contents('whazzup.txt');
preg_match('#\!CLIENTS(.*)\!SERVERS#usU', $file, $match);
$res = explode(PHP_EOL, $match[1]);
  foreach($res as $str){
    if(strlen($str)>0){
        $temp = explode(':', $str); 
    } 
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Online maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(32.4942768,19.0286076)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
  setMarkers(map, beaches);
}
var beaches = [

['',"<?php echo "".$temp[5]."";?>,<?php echo "".$temp[6]."";?>"],//Вот так не получается

['',32.4942768,19.0286076],//А вот так работает но не подходит
['',42.4942768,29.0286076],

];

function setMarkers(map, locations) {
  var image = {
    url: '1.png',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

greck6 · #2 (**permalink**) 07.02.2014, 13:56

<?php
$file = file_get_contents('whazzup.txt');
preg_match('#\!CLIENTS(.*)\!SERVERS#usU', $file, $match);
$res = explode(PHP_EOL, $match[1]);
  foreach($res as $str){
    if(strlen($str)>0){
        $temp = explode(':', $str); 
        echo "['',".$temp[5].",","".$temp[6]."]<br>";
    } 
}
?>

Этим парсером делаю выборку координат и получаю результат в виде:

['описание',59.820550,70.177150] как раз то что нужно!

но как этот результат передать именно в JS в var beaches = [сюда];

greck6 · #3 (**permalink**) 07.02.2014, 16:33

Вобщем продвинулся я чуть дальше, тоесть получилось передать значение переменной из PHP в javascript
но на карту выводится только один маркер который последний хотя в переменной несколько маркеров.

Хотя просто через echo выводятся в html все координаты такого типа: ['AFL395',59.820550,70.177150],['GLP049',50.820550,60.177150], и так далее

<?php
$file = file_get_contents('whazzup.txt');
preg_match('#\!CLIENTS(.*)\!SERVERS#usU', $file, $match);
$res = explode(PHP_EOL, $match[1]);
  foreach($res as $str){
    if(strlen($str)>0){
        $temp = explode(':', $str); 
        $data = "['".$temp[0]."',".$temp[5].",".$temp[6]."],";
        echo "$data"; //Вот тут выводится всё как надо
    } 
}
?>
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Online maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
 
function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(32.4942768,19.0286076)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                         
  setMarkers(map, beaches);
}
var beaches = [
 
<? echo "$data";?>//А тут тлько последние координаты
 
];
 
function setMarkers(map, locations) {
  var image = {
    url: '1.png',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]  
    });
  }
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Cuntmann · #4 (**permalink**) 07.02.2014, 20:30

<?php
$file = file_get_contents('whazzup.txt');
preg_match('#\!CLIENTS(.*)\!SERVERS#usU', $file, $matches);
$res = explode(PHP_EOL, $matches[1]);
$output = '';
foreach($res as $str){
if(strlen($str)>0){
$temp = explode(':', $str);
$output .= "['".$temp[0]."',".$temp[5].",".$temp[6]."],";
}
}
?>
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Online maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var beaches = [
<?php echo $output; ?>
];

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(32.4942768,19.0286076)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                         
  setMarkers(map, beaches);
}

function setMarkers(map, locations) {
  var image = {
    url: '1.png',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: 500//beaches[3]  
    });
  }
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

greck6 · #5 (**permalink**) 07.02.2014, 20:53

Хотел написать решение но не успел
Правда не много по другому но тоже работает

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>FSX SERVER</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(55.408790,37.906310)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  setMarkers(map, beaches);
}
var beaches = [

<?php
$file = file_get_contents('whazzup.txt');
preg_match('#\!CLIENTS(.*)\!SERVERS#usU', $file, $match);
$res = explode(PHP_EOL, $match[1]);
  foreach($res as $str){
    if(strlen($str)>0){
        $temp = explode(':', $str); 
        $data = "['".$temp[0]."',".$temp[5].",".$temp[6]."],";
        echo "$data";
    } 
}
?>

];
function setMarkers(map, locations, text, title) {
  var image = {
    url: '1.png',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  }; 
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

greck6 · #6 (**permalink**) 07.02.2014, 21:00

Теперь другая задача у меня, нужно сделать обновление маркеров без перезагрузки страницы.
Есть кусок кода но как его юзать не знаю, я вообще сегодня первый раз столкнулся с javascript

var timex = 0;
function reloadTime()
{
if (timex >= 0)
{
document.getElementById('rtime').innerText = "Обновление карты через: "+timex+" сек.";
timex = timex-1;
rel = window.setTimeout("reloadTime();", 1000);
};
};


window.setTimeout("xmlreload();", 15000);
timex = 15;
reloadTime();

Cuntmann · #7 (**permalink**) 09.02.2014, 13:58

Сообщение от greck6

...
Есть кусок кода но как его юзать не знаю, я вообще сегодня первый раз столкнулся с javascript ...

а вам не кажется, что, если вы первый раз столкнулись с javascript, то вполне логично было бы для начала изучить его, а потом уже пытаться использовать? или вы полагаете, что будете каждый день кидать сюда какие-то "куски кода", а кто-то за вас будет решать ваши проблемы с самолетиками? или во что вы там еще играете..

andrey3681 · #8 (**permalink**) 30.08.2016, 11:52

Помогите пожалуйста!

var map, circle, circleOptions, setCenter, marker;
 
	function initialize() {
    var myLatlng = new google.maps.LatLng(55.7522200, 37.6155600);
    var myOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [
		{
		   "featureType": "water",
		   "stylers": [
		   { "color": "#00C3E9" },
		   { "saturation": 0 }
		   ]
		}
		],
		zoomControl: true,
		scrollwheel: false
    }
	
    map = new google.maps.Map(document.getElementById("my_map"), myOptions);
	setCenter = true;
     
	 var radius = 10;
	 
    circleOptions = {
        fillColor:"#00C3E9",
        fillOpacity:0.5,
        strokeColor:"#F27900",
        strokeOpacity:1,
        strokeWeight:2,
        clickable:false,
		radius: radius*1000
	}
	
	google.maps.event.addListener(map, 'click', function(event) {
        if (setCenter) {
           if (marker != undefined) {
				marker.setMap(null);
            }
			
            marker = new google.maps.Marker({
                position:event.latLng,
                clickable:true,
				draggable: true,
				icon: 'images/beachflag_null.png'				
            });
			
            marker.setMap(null);
            circleOptions.center = event.latLng;
            setCenter = false;
			
			if (circle != undefined) {
                circle.setMap(null);
            }
			
			
			circle = new google.maps.Circle(circleOptions);
            circle.setMap(map);
            setCenter = true;
			
			
			var latlng = new google.maps.LatLng(55.749860, 37.673670);
			if (distHaversine(latlng, circleOptions.center) < radius) {
				var infowindow1 = new google.maps.InfoWindow({
					content: "текст"
				});
				var marker1 = new google.maps.Marker({
					position:latlng,
					clickable:true,
					map: map,
					title: '$title',
					animation: google.maps.Animation.DROP,
					visible: true,
					icon: 'images/beachflag.png'
				});
				marker1.addListener('click', function() {
					infowindow1.open(map, marker1);
				});
			}
        }
    });
	
		google.maps.event.addListener(marker, "dragend", function(event) {
			var point = marker.getPosition();// новые координаты маркера: point.lat() и point.lng()
		});

		
	}

function loadScript() {
    var script = document.createElement("script");
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
}
 
rad = function(x) {return x*Math.PI/180;}
 
//эта функция используются для определения расстояния между точками на
//поверхности Земли, заданных с помощью географических координат
//результат возвращается в км
distHaversine = function(p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(p2.lat() - p1.lat());
    var dLong = rad(p2.lng() - p1.lng());
     
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
     
    return d.toFixed(3);
}
 
window.onload = loadScript;

Если координаты маркера попадают в область овала ставится маркер, как его скрыть при повторном клике и если он не попал в область овала?

Форум

Справочник

Discord чат

Курсы javascript