Demo – využití GPS
Po zadání adresy se zobrazí její GPS souřadnice a pomocí souřadnic je adresa zobrazena i na mapě. Pro získání souřadnic slouží validační callback.
Formulář s využitím GPS:
Zdrojový kód – JavaScript:
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript" src="https://api.mapy.cz/loader.js"></script>
<script type="text/javascript">Loader.load();</script>
<script type="text/javascript">
var map;
var markerLayer;
var markers = [];
var coordinates = [];
var smartform = smartform || {};
window.onload = function() {
initMap();
}
smartform.beforeInit = function () {
smartform.setClientId('[clientId]');
}
/* Nastavení validačního calllbacku */
smartform.afterInit = function() {
smartform.getInstance().addressControl.addValidationCallback(validationCallback);
}
/* Validační callback pro získání adresy a GPS souřadnic */
function validationCallback(response) {
if (response.result.type == smartform.AddressValidationResultType.HIT) {
clear();
var address = response.result.addressArray[0];
showAddress(address);
} else {
clear();
}
}
/* Inicializace mapy */
function initMap(){
var origin = SMap.Coords.fromWGS84(15.5, 50);
map = new SMap(JAK.gel("map_div"), origin, 10);
map.addControl(new SMap.Control.Sync());
map.addDefaultLayer(SMap.DEF_BASE).enable();
markerLayer = new SMap.Layer.Marker();
map.addLayer(markerLayer);
markerLayer.enable();
map.addDefaultControls();
}
/* Zobrazení adresy na mapě */
function showAddress(address) {
if( !address.GPS_LAT || !address.GPS_LONG) {
// nektere adresy nemaji ulozene souradice
document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\">Pro tuto adresu nejsou GPS souřadnice k dispozici.</div>';
} else {
// zobrazeni GPS vedle mapy
document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\">GPS souřadnice:<br /> <div style=\"font-weight:bold; font-size:1.2em; margin-top:4px\">' +
format(address.GPS_LAT,address.GPS_LONG) +
'</div><div style=\"font-size:0.8em; margin-bottom:4px;\">' + round(address.GPS_LAT) + ", " + round(address.GPS_LONG) + '</div></div>';
// zobrazeni na mape
showOnMap(address.GPS_LONG, address.GPS_LAT);
centerTheView();
}
}
/** Funkce na zaokrouhleni GPS souradnic. */
function round(x) {
return Math.round(x*1000000)/1000000;
}
/** Vymazani mapy a souradnic. Vola se, pokud nebyla zadana validni adresa. */
function clear(){
document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\"></div>';
coordinates = [];
markerLayer.removeAll();
markers = [];
}
/** Spocitani pozici mapy tak, aby znacky byly videt */
function centerTheView(){
var cz = map.computeCenterZoom(coordinates); /* Spočítat pozici mapy tak, aby značky byly vidět */
var last = cz.length-1;
map.setCenterZoom(cz[0], cz[last]);
}
/** Prevedeni GPS souradnic z desetinneho formatu na zapis pomoci minut a sekund.
* Napr.: (50.761701, 15.091974) -> 50°45'42.1''N 15°5'31.1''E */
function format(x, y) {
var xx = convertCoord(x);
var yy = convertCoord(y);
return xx+"N "+yy+"E";
};
/** Prevedeni jedne souradnice */
function convertCoord(dD) {
var D = Math.floor(dD);
var dM = (dD-D)*60;
var M = Math.floor(dM);
var S = Math.round((dM-M)*600)/10;
return D+"°"+M+"\'"+S+"\'\'";
}
/** Zobrazeni souradnic na mape */
function showOnMap(lonD, latD) {
var coords = SMap.Coords.fromWGS84(lonD, latD); /* Souřadnice značky, z textového formátu souřadnic */
var options = {
anchor: {left:10, bottom: 1} /* Ukotvení značky za bod uprostřed dole */
}
var marker = new SMap.Marker(coords, null, options);
coordinates.push(coords);
markers.push(marker);
for (var i=0; i < markers.length; i++) {
markerLayer.addMarker(markers[i]);
}
}
</script>
Zdrojový kód – HTML pro formulář:
<form>
<input class="smartform-address-street-and-number" id="smartform_ulice" placeholder="Ulice a číslo" type="text" />
<input class="smartform-address-city" id="smartform_obec" placeholder="Obec" type="text" />
<input class="smartform-address-zip" id="smartform_psc" placeholder="PSČ" type="text" />
<div id="gps" style="display:block;"></div>
<button onclick="smaz()">Ještě jednou</button>
</form>
Zdrojový kód – HTML pro mapu:
<div id="map_div" style="width:100%; margin-top: 0px"></div>