Un utilizator poate sa foloseasca aceste harti fara nici o problema, iar cea mai mare parte din persoanele care iti acceseaza web situl nu o sa aibe probleme cu folosirea unei harti. Mai jos o sa discutam despre cum putem sa integram si sa folosim Bing Maps in web situl nostru.
Exista mai multe versiuni de API pentru Bing Maps, ultima versiune (vs 7.0) a fost regandita de la 0 si a devenit extrem de usor de folosit. O sa ne uitam peste versiunea 7.0, care este integrata in totalitate cu ajax.
Tot setup-ul se face din java script. Primul pas este sa ne cream un obiect de tip Map si sa specificam zona de pe pagina unde sa apara:
<head>
...
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), null);
}
</script>
</head>
<body onload="getMap();">
<div id='mapDiv' style="position:relative; width:600px; height:500px;"></div>
</body>
In momentul de fata avem harta afisata, dar avem un mesaj de eroare cane ne indeamna sa folosim credentiale valide. Harta se poate folosii si asa, doar ca banerul cu mesajul de eroare nu o sa il putem sterge. Ca sa scapam de el trebuie sa ne inregistram la adresa http://www.microsoft.com/maps/developers/web.aspx .
O sa primim o cheie unica pe care o sa o setam cand cream un nou obiect de tip map.
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: '[CheieUnica]'
});Urmatorul pas este sa adaugam cateva puncte( pushpin-uri). Ce este important la aceste pushpin-uri sunt coordonatele GPS. In exemplul de mai jos, unul din pushpin-uri va puncta spre o locatia data, iar celalat spre centrul hartii.
function updatePushpinLocation()
{
var pushpinLocatieData= new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpinLocatieData);
pushpinLocatieData.setLocation(new Microsoft.Maps.Location(48, 52));
var pushpinCentruHarta= new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpinCentruHarta);
}var infoboxOptions = { title:'Titlu', description:'Descriere ...'};
var pushpin = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );
map.entities.push(pushpin);pushpinClick= Microsoft.Maps.Events.addHandler(pushpin, 'click', clickEventInfo);
clickEventInfo= function (e) { alert("Click"); }Unele browsere ne permit sa accesam locatia GPS a aparatului si sa localizam userul pe harta. Trebuie sa tinem cont ca utilizatorul o sa fie intrebat daca face share la aceasta informatie de catre brower.
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
geoLocationProvider.getCurrentPosition();- Traffic Module
- Clustering Module
- Direction Module
- VenueMaps Module
- Navigation Bar Module
O alta functionalitate este cautare pe harta. Tot ce trebuie sa facem este sa apelam un serviciu REST oferit de Bing Maps.
map.getCredentials(function(credentials) {
var searchRequest = 'http://dev.virtualearth.net/REST/v1/Locations/ClujNapoca?output=json&jsonp=SearchServiceCallback&key=' + credentials;
var mapscript = document.createElement('script');
mapscript.type = 'text/javascript';
mapscript.src = searchRequest;
document.getElementById('SDKmap').appendChild(mapscript);
});Enjoy.
0 comments:
Post a Comment