Динамическое размещение маркеров на Google maps
Есть сервер для авиасимулятора 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>
|
<?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 = [сюда]; |
Вобщем продвинулся я чуть дальше, тоесть получилось передать значение переменной из 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>
|
<?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>
|
Хотел написать решение но не успел
Правда не много по другому но тоже работает
<!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>
|
Теперь другая задача у меня, нужно сделать обновление маркеров без перезагрузки страницы.
Есть кусок кода но как его юзать не знаю, я вообще сегодня первый раз столкнулся с javascript :help:
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();
|
Цитата:
|
Помогите пожалуйста! :cray:
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;
Если координаты маркера попадают в область овала ставится маркер, как его скрыть при повторном клике и если он не попал в область овала? |
| Часовой пояс GMT +3, время: 17:28. |