69 lines
2.3 KiB
PHP
69 lines
2.3 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8 />
|
||
|
|
<title>Display latitude longitude on marker movement</title>
|
||
|
|
|
||
|
|
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
|
||
|
|
<style>
|
||
|
|
body { margin:0; padding:0; }
|
||
|
|
#map {width: 100%;height: 280px;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body onload="javascript:window.parent.document.getElementById('<?php echo $_REQUEST[id]?>').value= '';">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id='map'></div>
|
||
|
|
<?php
|
||
|
|
if ($_REQUEST[lat] !='') {$lat=$_REQUEST[lat];}else {$lat= "-75.5570125579834";}
|
||
|
|
if ($_REQUEST[lon] !='') {$lon=$_REQUEST[lon];}else {$lon= "6.2463742841860";}
|
||
|
|
if ($_REQUEST[zoom] !='') {$zoom=$_REQUEST[zoom];}else {$zoom= "16";}
|
||
|
|
|
||
|
|
?>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
var map = L.map('map').setView([<?php echo $lon ?>, <?php echo $lat ?>], <?php echo $zoom ?>);
|
||
|
|
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
||
|
|
|
||
|
|
function onLocationFound(e) {
|
||
|
|
var radius = e.accuracy / 2;
|
||
|
|
<?php if ($_REQUEST[lat] =='') {
|
||
|
|
echo "var marker = L.marker(e.latlng,{draggable: true}).addTo(map);";
|
||
|
|
}else{
|
||
|
|
echo "var marker = L.marker([$lon,$lat],$zoom,{draggable: true}).addTo(map);";
|
||
|
|
} ?>
|
||
|
|
|
||
|
|
marker.on('dragend', ondragend);
|
||
|
|
ondragend();
|
||
|
|
function ondragend() {
|
||
|
|
var m = marker.getLatLng();
|
||
|
|
var z = map.getZoom();
|
||
|
|
// window.parent.document.getElementById('<?php echo $_REQUEST[id]?>').value= m.lng+' '+m.lat+' '+z;
|
||
|
|
window.parent.document.getElementById('<?php echo $_REQUEST[id]?>').value= m.lng+' '+m.lat+' '+z;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onLocationError(e) {
|
||
|
|
var marker = L.marker([<?php echo $lon ?>,<?php echo $lat ?>],{draggable: true}).addTo(map);
|
||
|
|
marker.on('dragend', ondragend);
|
||
|
|
ondragend();
|
||
|
|
function ondragend() {
|
||
|
|
var m = marker.getLatLng();
|
||
|
|
var z = map.getZoom();
|
||
|
|
|
||
|
|
// window.parent.document.getElementById('<?php echo $_REQUEST[id]?>').value= m.lng+' '+m.lat+' '+z;
|
||
|
|
window.parent.document.getElementById('<?php echo $_REQUEST[id]?>').value= m.lng+' '+m.lat+' '+z;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
map.on('locationfound', onLocationFound);
|
||
|
|
map.on('locationerror', onLocationError);
|
||
|
|
map.locate({setView: true, maxZoom: 18});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<input id="campo" value='hola'>
|
||
|
|
</body>
|
||
|
|
</html>
|