kopia lustrzana https://github.com/DL7AD/pecanpico9
112 wiersze
2.0 KiB
PHP
112 wiersze
2.0 KiB
PHP
<?php
|
|
require "database.class.php";
|
|
|
|
$db = new MyDB();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
html {
|
|
font: 10pt Monospace;
|
|
}
|
|
#map {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 0;
|
|
bottom: 50px;
|
|
right: 0;
|
|
}
|
|
</style>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
|
|
var map;
|
|
var items = [];
|
|
|
|
function drawItems() {
|
|
$.getJSON("data.php", function(path) {
|
|
// Remove old items
|
|
while(true) {
|
|
try {
|
|
items.pop().setMap(null);
|
|
} catch(err) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Add new items on map
|
|
var last = null;
|
|
$.each(path, function(index, value) {
|
|
// Point
|
|
if(value.img) {
|
|
var marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(value.lat, value.lng),
|
|
icon: {
|
|
path: google.maps.SymbolPath.CIRCLE,
|
|
scale: value.img ? 4 : 1.5,
|
|
strokeColor: value.img ? '#000080' : value.org == 'log' ? '#FF0000' : '#008000'
|
|
},
|
|
map: map,
|
|
});
|
|
items.push(marker);
|
|
|
|
// Image Info Window
|
|
|
|
var infowindow = new google.maps.InfoWindow({
|
|
content: '<img src="' + value.img + '" />'
|
|
});
|
|
marker.addListener('mouseover', function() {
|
|
infowindow.open(map, marker);
|
|
});
|
|
marker.addListener('mouseout', function() {
|
|
infowindow.close();
|
|
});
|
|
}
|
|
|
|
// Line between points
|
|
if(last)
|
|
var line = new google.maps.Polyline({
|
|
path: [last,value],
|
|
geodesic: true,
|
|
strokeColor: last.org == 'log' || value.org == 'log' ? '#FF0000' : '#008000',
|
|
strokeOpacity: 0.4,
|
|
strokeWeight: 5,
|
|
map: map
|
|
});
|
|
items.push(line);
|
|
|
|
last = value;
|
|
});
|
|
});
|
|
}
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 9,
|
|
center: new google.maps.LatLng(53.2,7.1),
|
|
gestureHandling: 'greedy'
|
|
});
|
|
|
|
drawItems();
|
|
window.setInterval(drawItems, 10000);
|
|
}
|
|
</script>
|
|
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrrxJc6mu5DjFZVHiFqhFMO7JJg2g89Y8&callback=initMap"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|