Ecco come dotare un sito della geo-localizzazione dei visitatori sfruttando due servizi gratuiti e un piccolo sorso di javascript. Per la geo-localizzazione occorre per prima cosa risalire alla latitudine e longitudine del visitatore sfruttando il suo indirizzo IP, ottenute queste informazioni bisogna poi mostrarle su una mappa.. Ci sono diversi servizi in rete che permettono di associare latitudine e longitudine ad un indirizzo IP, io qui mi sono servito di freeIpServices.com il quale, oltre ad essere gratuito, è anche molto semplice da usare, basta importare uno script javascript e sfruttare le due funzioni getLat() e getLng() che restituiscono rispettivamente latitudine e longitudine. Quello che ci rimane da fare è prendere una bella mappa e incollarci sopra la latitudine e la longitudine usando "..abbondante ccccolla vinilica" di muciacciana memoria. Qui le alternative sono principalmente due: Google Maps e Virtual Earth di casa Microsoft. Nell'esempio che segue ho usato Virtual Earth per il quale c'è in rete un ottimo SDK a questo indirizzo The Virtual Earth Interactive SDK, per caricare la mappa basta richiamare il metodo LoadMap al quale vengono passati in input latitudine e longitudine. Ed ecco il risultato del nostro "collage"
Qui di seguito invece l'esempio completo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Coffee Break - GeoLocalization By IP </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://freeipservices.com/ip2geo?v=1"></script>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(getLat(), getLng()), 10 ,'h' ,false);
document.getElementById("_fis").style.width="475px";
}
</script>
<style type="text/css">
#_fis {
color: white;
background-color: black;
font-family: verdana;
font-weight: bold;
}
</style type="text/css">
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:500px; height:400px;"></div>
</body>
</html>
Nessun commento:
Posta un commento