Trochę geografii na twojej stronie II– “Instalacja” Map Bing
W poprzednim poście pisałem jak wstawić prostą mapkę na własną stronę w sieci.
Do zaimplementowania użyłem darmowego API pochodzącego od Google Maps. Jeśli chodzi o
rynek publicznie dostępnych API do tego typu rozwiązań warto zwrócić także uwagę na produkt
Microsoftu i ich konkurencyjnego produktu Bing Maps.
Dziś pokaże jak wstawić na naszą stronę właśnie taką mapę.Zaczynamy!
1.Na początku możemy stwierdzić że API Bing -a dzieli się na kilka wersji.
W zależności z jakiej technologii chcemy lub możemy skorzystać, mamy do wyboru:
- app API
- SOAP API
- REST API
- SilverLight API
- czy AJAX API
Niektóre z nich jak np: SilverLight wymagają zainstalowania dodatkowego oprogramowania na komputerze
przez użytkownika , jednak aby tego uniknąć posłużymy się starą technologią która nie będzie sprawiała
takich problemów potencjalnym użytkownikom naszego serwisu. Wybieramy API w Ajax-ie.
(PDF z dokumentacja tutaj)
2. Przygotowujemy dla naszej mapy miejsce ,"kontener" w którym chcemy ją umieścić.Oraz dołączamy bibliotekę z której będziemy korzystali.Parametr v oznacza wersje mapy która ładujemy (aktualna wersja 6.3), natomiast parametr mkt ustala język aplikacji.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pierwsza Mapa Bing</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Dołączona biblioteka Bing Maps --> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"></script> <script type="text/javascript"></script> </head> <body> <!-- Troszkę stylu dla naszego kontenera na mapę . Uwaga nasz kontener musi posiadać atrybuty width i height w przeciwnym wypadku nasza mapka nie zostanie wyświetlona. --> <div id='myMapContainer' style="position:relative; width:400px; height:400px;border:1px solid grey;"></div> </body> </html> |
3.Dodajemy funkcje loadMapOnPage() w której podczas zdarzenia onload będziemy inicjowali oraz wyświetlali naszą mapę.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pierwsza Mapa Bing</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"></script> <script type="text/javascript"> <!-- Funckja która załaduje naszą mapę w dokumencie html --> function loadMapOnPage() { } </script> </head> <body onload="loadMapOnPage();"> <div id='myMapContainer' style="position:relative; width:400px; height:400px;border:1px solid grey;"></div> </body> </html> |
4.W ciele funkcji tworzymy nasz obiekt mapy VEMap() gdzie parametrem jest nasz kontener czyli 'myMapContainer'.Metodą LoadMap ładujemy naszą mapę.1 parametrem jest położenie punktu na mapie (w tym przypadku wybrałem współrzędne miasta Detroit w stanie Michigan u USA), drugi to zoom( wartości od 1 do 19),layout mapy,parametr blokowania mapy ,Model 2 lub 3D,pozostałe dwa parametry ustawiamy na true oraz wartość 1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function loadMapOnPage() { /* var myMap - zmienna która będzie przechowywała obiekt mapy */ /* var myPosition - zmienna przechowująca obiekt pozycji na mapie */ /* var zoom - zmienna ze skala przybliżenia mapy */ /* var myMapModel - zmienna zawierająca typ modelu mapy 2D lub 3D*/ /* var myMapView - zmienna zawierająca typ layout mapy */ var myMap = new VEMap('myMapContainer'); var myPosition = new VELatLong(42.331427, -83.045754, 0, VEAltitudeMode.RelativeToGround); var zoom = 12; var myMapModel = VEMapMode.Mode2D; var myMapView = VEMapStyle.Road; myMap.LoadMap(myPosition, zoom, myMapView, false, myMapModel ,false,0); } |
5. W tagu body naszego dokumentu html dodajemy do zdarzenia onload nasza funkcję która ma załądować mapę.
1 | <body onload=" loadMapOnPage();"> |
6. Gotowe !!! Nasza mapa została załadowana z całą funkcjonalnością. Całość wydaje się o wiele szybsza i prostsza niż w przypadku konkurencyjnego Google Maps. Bing Maps choć nie oferuje jeszcze tak wielkiej ilość map oraz zdjęć to warto zwrócić uwagę np: na funkcje "Bird's eye" nie dostępną u konkurencji (zdjęcia lotnicze robione pod kątem 45°).