Kezdőlap > Windows 8 > Geolokáció és a Bing Maps – JavaScript

Geolokáció és a Bing Maps – JavaScript

2013. január 22. kedd Hozzászólás Go to comments

Ebben a feladatban egy olyan Windows Store alkalmazást fogunk elkészíteni, amiben lekérdezzük, a jelenlegi pozíciónkat majd ezt megjelenítjük a Bing Maps térképszolgáltatása segítségével. Az alkalmazást JavaScriptben fogjuk megírni.

image

A megjelenő New Project ablakban a jobb oldali oszlopban válasszuk ki a JavaScript Windows Store element. A sablonok (template) közül pedig most a Blank App templatet fogjuk használni. A Solution neve legyen most BingMapsApp. Ha ez meg van, kattintsunk az OK gombra!

image

Miután a Visual Studio betöltötte a sablont, a referenciák közzé vegyük fel a Bing Maps-ot. A Solution Explorerben (alapértelmezés szerint jobb felső sarok) kattintsunk a Referneces-re jobb egérgombbal és válasszuk, ki az Add Reference menüpontot.

image

A megjelenő ablakban válasszuk ki a Bing Maps for JavaScript-et. (Abban az esetben, ha a Bing Maps for JavaScript nem jelenik meg ellenőrizzük, hogy a Bing Maps SDK for Windows Store apps-t megfelelően telepítettük.) (Legyen mellette kipipálva) Kattintsunk az OK gombra.

image

Amint hozzáadtuk a Bing Maps for JavaScriptet megjelenik a referenciák között.

image

Nyissuk meg a default.html dokumentumot a Visual Studio-ban. láthatjuk, hogy ez egy egyszerű HTML5 dokumentum, amibe néhány script (WinJS) már előre be van töltve. Mivel a Bing Maps SDK komponenseire is szükségünk lesz, ezért ezt is töltsük be. Ehhez mindösszesen csak fogd és vidd (Drag and Drop) módszerrel dobjuk fel a referenciát. Ezt a HEAD tagba célszerű elhelyezni. (A sorrendiség számít!)

<head>
    <meta charset="utf-8" />
 
   <title>Devportal.hu – SHOT</title>
    <!– WinJS references –>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <script src="/Bing.Maps.JavaScript/js/veapicore.js"></script>
    <script src="/Bing.Maps.JavaScript/js/veapiModules.js"></script>
    <!– BingMapsDemo references –>
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>

A body-hoz adjunk egy Div-et melynek neve legyen az, hogy map.

<body>
    <div id="map">
    </div>
</
body>

A js mappához adjunk hozzá egy új JavaScript fájlt. Ebben a JavaScript fájlban a Bing Maps specifikus funkciókat fogjuk elhelyezni. A js mappán kattintsunk, jobb egérgombbal majd válasszuk, ki az Add -> New Item menüpontot.

image

A megjelenő ablakban válasszuk ki a JavaScript File-t. Ennek a neve legyen most a mapManager.js, majd kattintsunk, az Add gombra!

image

Ekkor a Visual Studio betölti mapManager.js fájl, ami egy üres fájl. Ahhoz, hogy a WinJS API-jait el tudjuk érni úgy, hogy van IntelliSense a Referencies közül dobjuk ide (Drag and Drop) a base.js és a UI.js

A mapControl.js első két sora így fog kinézni.

/// <reference path="//Microsoft.WinJS.1.0/js/base.js" />
/// <reference path="//Microsoft.WinJS.1.0/js/ui.js" />

Ezt követően készítsünk egy névteret a WinJS segítségével. Bár a JavaScriptben alapból nincs névtér, de korábban is trükközéssel ezt meglehetett oldani. A WinJS ugyan ezt csinálja csak egyszerűbben. A WinJS.Namespace.define segítségével létrehozhatunk egy névteret, majd egy JavaScript objektumot. A JavaScript objektum három funkciót és egy publikus adattagot fog tartalmazni.

(function () { 

     WinJS.Namespace.define("MapControl",
        {
            map: null,
            initMap: function () {
            },


            getMyPosition: function () {
            },

 

            addPushpin: function (latitude, longitude) {

            }

        });
})();

Az initMap a térkép inicializálását fogja elvégezni. A getMyPosition-ben a jelenlegi pozíciónkat állapítjuk meg, míg az addPushpin segítségével egy gombostűt helyezünk el a térképpen. De kezdjük az initMap-pal.

Az initMap-ban létrehozunk egy mapOption objektumot. Ennek az objektumnak négy eleme lesz.

  • credentials: A bingmapsportal adott API Key-t itt kell megadnunk
  • center: A térkép középpontja. (Jelen esetben Budapest)
  • mapTypeId: a térkép típusa. Jelen esetben utca térkép.
  • zoom: a közelítés mértéke. Minél nagyobb a szám annál közelebb van az adott pont.

initMap: function () {

    try {
        var mapOption =
            {
                credentials: ‘AnY59ktyRJ-7g-m_…’,
                center: new Microsoft.Maps.Location(47.5, 19.05),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 10
            };

 

        map = new Microsoft.Maps.Map(document.getElementById(‘map’), mapOption);

 

    } catch (e) {
        var dialog = new Windows.UI.Popups.MessageDialog(e.message);
        dialog.showAsync();
    }
},

A mapOption meghatározása után létrehozunk egy új Map-ot. (A map változót korábban létrehoztuk. Figyeljük meg az előző ábrát!) A map létrehozásánál meg kell mondanunk azt az elementet amiben megakarjuk jeleníteni a térképet. Ebben az esetben egy ’map’ nevű div. A második paraméter pedig a mapoption amit korábban létrehoztunk.

Ezt a műveletet egy try catch blokba helyeztük. Abban az esetben, ha hiba történik, egy MessageDialog (Üzenet párbeszédablak) jelenik meg. Figyeljük meg, hogy hozhatunk létre MessageDialogoka!

Az alkalmazást még ne indítsuk, el mivel még nem működne! Ahhoz, hogy működjünk először a default.html-be töltsük be az előzőleg elkészített javasciprt fájlt. (Itt is csak úgy, mint korábban a Drag and Drop módszer működik. A sorrend fontos!)

 <link href="/css/default.css" rel="stylesheet" />
 <script src="js/mapManager.js"></script>
 <script src="/js/default.js"></script>
</
head>

Ezt követően nyissuk meg a default.js fájlt és az onactivated-nél közvetlenül az args.setPromise után töltsük be a Microsoft.Maps.loadModule segítségével a Microsoft.Maps.Map –ot. Figyeljük meg, hogy a második paraméternél a callback arra az initMap-ra hivatkozik, amit mi a MapControl névtérnél definiáltunk.

app.onactivated = function (args) {

    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
    args.setPromise(WinJS.UI.processAll());
    Microsoft.Maps.loadModule(‘Microsoft.Maps.Map’, { callback: MapControl.initMap });
    }
};

Most már elindíthatjuk az alkalmazást (F5). Elindítani a Visual Studio toolbarjáról is tudjuk.

  • Local Machine: helyi gépünkre telepíti az alkalmazást
  • Simulator: Egy szimulációs környezetbe. (Több funkció tesztelhető. Multitocuh, elforgatás stb)
  • Remote Machine: Távoli gépre is telepíthetünk.

image

Ebben az esetben a Local Machine ajánlott, de dönthetünk máskép is.

Ha mindent jól csináltunk, akkor, most már megjelenik a Bing Maps térképe.

image

A térkép megjelent itt az ideje megállapítanunk, hogy hol is vagyunk. Ehhez először az alkalmazásunknak meg kell mondanunk, hogy ez az alkalmazás bizony el fogja érni a lokáció meghatározásához szükséges eszközt vagy eszközöket.

Kattintsunk a package.appxmanifest fájlra. A Capabilities fülön pipáljuk be a Location –t. Ezzel jelezzük, hogy az alkalmazásunk ezt az erőforrást használni fogja.

image

A getMyPosition-nál fogjuk lekérdezni, hogy hol vagyunk, de az addPushpin –nál fogjuk megjeleníteni. A getMyPositionben ha megkaptuk a szélességi és hosszúsági fokokat fogjuk az addPushpint megírni. Így ennek függvényében először az addPushpin funkciót írjuk meg.

Itt tulajdonképpen csak egy Location-t hozunk létre, aminek az addPushpint latitude és longitude paramétereit adjuk át. Ezt követően egy pushpin-t hozunk létre aminek átadjuk ezt a locationt. A pushpint pedig átadjuk a map entites speciális tömbjének a push funkció segítségével. Bonyolultnak hangozhat, de nem azt.

Írjuk hát meg az addPushpin-t:

addPushpin: function (latitude, longitude) {
    var point = new Microsoft.Maps.Location();
    point.latitude = latitude;
    point.longitude = longitude;
    var pushpin = new Microsoft.Maps.Pushpin(point, null);
    map.entities.push(pushpin);
}

Ezt követően pedig már megírhatjuk a getMyPosition funkciót.

getMyPosition: function () {
    var location = new Windows.Devices.Geolocation.Geolocator();
    location.getGeopositionAsync().then(function (result) {
        MapControl.addPushpin(result.coordinate.latitude, result.coordinate.longitude);
    });
},

Itt létrehozunk egy Windows.Devices.Geolocation.Geolocator objektumot, majd meghívjuk a getGeopositionAsync funkcióját. Figyeljünk rá, hogy aszinkron! Ezt követően egy elegáns .then meghívásával azt mondjuk, hogy ha sikerült megkapni a koordinátákat, akkor a MapControl.addPushpin metódusát meghívjuk és átadjuk a számára szélességi és hosszúsági fokokat.

Még annyit kell tennünk, hogy ez működjön is, hogy az initMap –nál a map létrehozása után meghívjuk a MapControl.getMyPosition funkcióját. Tegyük hát meg!

   
    map = new Microsoft.Maps.Map(document.getElementById(‘map’), mapOption);
    MapControl.getMyPosition();
}
catch (e) {

Most már mindennel készek vagyunk, indítsuk el az alkalmazást! Az első indulásnál az alkalmazásunk megkérdezi a felhasználótól, hogy engedélyezi-e megállapítani a felhasználó jelenlegi pozícióját. (A pozíció pontossága ip címből, wierless adatokból, és ha a készülék támogatja, akkor a GPS eszköz által nyújtott információkból adódhat. Legegyszerűbb esetben a várost fogja megmondani.)

image

Advertisements
  1. 2013. január 22. kedd - 11:58

    Háát, Bing Maps, más fél éve körül csináltam egy SharePoint webpartot ami használta (kérés volt, hogy Bing Maps legyen), de bizony a helyszínek jó részét csak úgy mutatta helyesen, ha Google Maps-ben megkeresték és felvitték az adatforrásban a koordinátákat.
    Pl. erre “Budapest, Erzsébet körút” mindáron egy 17. kerületi Erzsébet körutat talált (ellenőriztem: még most is), minden áron, meg ha irányítószámot megadtam neki.
    Vagy itt Szegeden ottjon az Újszegedi oldalon következetesen a Tisza túl partját mutatja, hogy szerinte ott vagyok 🙂
    Szóval a cucc amit leírsz, ok, csak a Bing maps köhög.

  2. 2013. január 22. kedd - 12:35

    Ez sajnos igaz… szívok is vele rendesen én is.
    Ha csak abból indulunk ki, hogy az a bizonyos Budapest hol van. Már ebben is vannak eltérések.

    Igaz hozzá teszem fejlődött, mióta megkapta a Nokia DB-jét, de még így nagyon sok a hiányosság. 1 ével ezelőtt Budapest középpontja a keleti pályaudvar volt, ma már közelebb van 0 Km kőhöz, de így is az Andrassy út oktogon környéke.

  1. 2013. január 31. csütörtök - 09:50
  2. 2013. január 31. csütörtök - 10:41

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: