Integrer Bing Maps med jQuery

Bing Maps tilbyder en kraftfuld platform for at tilføje kortfunktionalitet til din hjemmeside. Ved at kombinere Bing Maps API med jQuery, et populært JavaScript-bibliotek, kan du skabe dynamiske og interaktive kortoplevelser for dine brugere. Denne artikel vil guide dig gennem processen med at integrere Bing Maps med jQuery, fra de grundlæggende trin til mere avancerede teknikker.

Kom godt i gang med Bing Maps og jQuery

Før du kan begynde at integrere Bing Maps, skal du have en Bing Maps API-nøgle. Denne nøgle fungerer som din adgangstilladelse til Bing Maps-tjenesterne. Du kan oprette en nøgle ved at besøge Bing Maps Portal og logge ind med din Microsoft-konto.

Når du har din API-nøgle, skal du inkludere de nødvendige scriptfiler på din HTML-side. Dette inkluderer jQuery-biblioteket, Bing Maps AJAX Control og eventuelt en jQuery-plugin til Bing Maps, hvis du vælger at bruge en.

Nødvendige Scriptfiler

Her er et eksempel på, hvordan du inkluderer de nødvendige scripts:

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script type='text/javascript' src='https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'></script> <script type='text/javascript' src='javascript/bingmap.min.js'></script> 

Derefter skal du have et div-element, hvor kortet skal vises:

 <div id='map' style='width: 600px; height: 400px;'></div> 

Til sidst initialiserer du kortet med din API-nøgle:

 $ ( '#map' ) . bingmap ( { api: 'DINBINGMAPSAPINØGLE' } ) ; 

Grundlæggende Kortintegration med jQuery

Den mest basale integration involverer at oprette et kort i et specifikt div. Bing Maps API giver dig mulighed for at gøre dette direkte.

Initialisering af Kortet

Når siden er indlæst, kan du initialisere kortet. Her er et simpelt eksempel ved hjælp af jQuery:

 $ ( document ) . ready ( function () { var map = new Microsoft.Maps.Map ( $ ( "#map" )[0], { credentials: 'DINBINGMAPSAPINØGLE', center: new Microsoft.Maps.Location(51.5074, -0.1278), // London som eksempel zoom: 10 }); }); 

I dette eksempel opretter vi et nyt Microsoft.Maps.Map-objekt og angiver credentials med din API-nøgle. Vi sætter også et startcenter og zoomniveau.

Tilføjelse af Pushpins

Du kan nemt tilføje markører (pushpins) til kortet for at fremhæve specifikke lokationer.

 function AddPushpin(map, location, title, description) { var pin = new Microsoft.Maps.Pushpin(location); pin.Title = title; pin.Description = description; // Opret en Infobox for at vise detaljer, når der klikkes på pushpinnen var infoboxLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(infoboxLayer); var infobox = new Microsoft.Maps.Infobox(location, { title: title, description: description, visible: false, offset: new Microsoft.Maps.Point(0, 20) }); infoboxLayer.push(infobox); // Tilføj en event handler til klik på pushpinnen Microsoft.Maps.Events.addHandler(pin, 'click', function () { infobox.setOptions({ title: title, description: description, visible: true }); }); map.entities.push(pin); } // Eksempel på brug: var londonLocation = new Microsoft.Maps.Location(51.5074, -0.1278); AddPushpin(map, londonLocation, 'London', 'Hovedstaden i England'); 

Brug af Bing Maps REST API med jQuery

Bing Maps REST API giver adgang til en række kraftfulde funktioner, såsom geokodning (konvertering af adresser til koordinater), omvendt geokodning, ruteberegning og meget mere. Du kan få adgang til disse API'er ved hjælp af GET-anmodninger, ofte med JSONP for at håndtere cross-domain anmodninger.

Geokodning med jQuery og JSONP

Her er et eksempel på, hvordan du bruger Bing Maps Locations API til at geokode en adresse ved hjælp af jQuery og JSONP:

 function GeocodeAddress(address, callback) { var bingMapsKey = 'DINBINGMAPSAPINØGLE'; var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURIComponent(address) + "&key=" + bingMapsKey + "&jsonp=GeocodeCallback"; $ .ajax ( { url: geocodeRequest, dataType: "jsonp", jsonp: "jsonp", // Angiver JSONP-parameteren success: function ( response ) { if ( response && response.resourceSets && response.resourceSets.length > 0 && response.resourceSets[0].resources) { callback(response.resourceSets[0].resources); } else { callback(null); } }, error: function ( e ) { alert ( 'Fejl under geokodning: ' + e.statusText ) ; callback(null); } }); } // Eksempel på brug: $ ( "#searchBox" ) . on ( 'keypress', function ( e ) { if ( e.which == 13) { // Enter-tasten var address = $ ( this ) . val ( ) ; GeocodeAddress(address, function(results) { if (results && results.length > 0) { var location = results[0].point.coordinates; var mapLocation = new Microsoft.Maps.Location(location[0], location[1]); map.setView({ center: mapLocation, zoom: 15 }); AddPushpin(map, mapLocation, results[0].name, address); } else { alert('Ingen resultater fundet for adressen.'); } }); } }); 

I dette eksempel bruges $.ajax med dataType: 'jsonp' og jsonp: 'jsonp' for at sikre, at anmodningen håndteres korrekt. Callback-funktionen modtager resultaterne, som kan bruges til at opdatere kortet.

Avancerede Funktioner: Autocomplete og Query API

Bing Maps tilbyder også funktioner til at skabe en autocomplete-oplevelse, hvor brugerens input foreslås baseret på eksisterende data. Dette kan gøres ved at forespørge dine egne datakilder, der er gemt i Bing Spatial Data Services.

Autocomplete med egne datakilder

For at implementere en brugerdefineret autocomplete-funktion, der foreslår byer baseret på dine egne placeringer, skal du først uploade dine data til Bing Spatial Data Services. Dette kan gøres fra Excel-filer.

Dataforberedelse

Dine data skal formateres korrekt, herunder tilføjelse af versionsinformation og OData-datatypning for hver kolonne. Kolonner som FormattedAddressLower er nyttige til at matche brugerinput uafhængigt af store/små bogstaver.

Opsætning af Datakilder

Upload dine forberedte datafiler (f.eks. i tab- eller pipe-delimiteret format) til Bing Maps Portal. Opret en hovednøgle og eventuelt en forespørgselsnøgle. Når dataene er uploadet og publiceret, får du en URL til at forespørge dine data.

Klientapplikation

I din klientapplikation bruger du denne URL til at lave forespørgsler. En typisk forespørgsel til autocomplete kunne se således ud:

 var dataSourceUrl = 'DINDATAKILDEURL'; // URL til din publicerede datakilde var maxSuggestions = 5; function GetSuggestions(query, callback) { var queryUrl = dataSourceUrl + "?spatialFilter=bbox(-90,-180,90,180)&$format=json" + "&$filter=StartsWith(FormattedAddressLower,'" + encodeURI(query.toLowerCase()) + "')%20eq%20true" + "&$top=" + maxSuggestions + "&key=DINBINGMAPSKEY"; // Brug en session key for lavere omkostninger $ .ajax ( { url: queryUrl, dataType: "jsonp", jsonp: "jsonp", success: function ( data ) { callback(data.d.results); }, error: function ( e ) { alert ( 'Fejl ved hentning af forslag: ' + e.statusText ) ; } }); } 

Denne forespørgsel bruger en StartsWith-filter på din FormattedAddressLower-kolonne for at finde matchende byer. Brug af en session-nøgle, genereret fra kortet, kan reducere omkostningerne ved API-kald.

Query API med jQuery

Bing Maps Query API, som er en del af Bing Spatial Data Services, giver dig mulighed for at forespørge dine datakilder baseret på forskellige kriterier, f.eks. nærhed til en rute eller specifikke egenskaber.

Eksempler på Forespørgsler

• Query by Area: Find alle biografer inden for 20 km.
• Query Near a Route: Find alle restauranter langs en bestemt rute.
• Query by Property: Find alle restauranter inden for 20 miles, der har mere end 20 ansatte.

Disse forespørgsler udføres typisk ved at konstruere en URL til din datakilde og inkludere de relevante filtre og parametre. Resultaterne kan derefter behandles med jQuery for at vise dem på kortet.

Opsummering og Bedste Praksis

Ved at bruge jQuery sammen med Bing Maps API og REST Services kan du opbygge sofistikerede kortapplikationer. Husk at:

• Altid bruge en gyldig Bing Maps API-nøgle.
• Overveje at bruge session keys for at minimere omkostningerne ved API-kald, især når du bruger Spatial Data Services.
• Forberede dine data omhyggeligt, når du bruger Spatial Data Services til autocomplete eller andre datadrevne funktioner.
• Udnytte jQuery UI's autocomplete-widget til at skabe en glat brugeroplevelse.
• Håndtere fejl og indlæsningsindikatorer for en bedre brugeroplevelse.

Integrationen af Bing Maps med jQuery åbner op for et væld af muligheder for at berige din hjemmeside med lokationsbaserede tjenester. Uanset om du har brug for et simpelt kort med markører eller en avanceret søgefunktion, giver kombinationen af disse teknologier dig værktøjerne til at lykkes.

Ofte Stillede Spørgsmål (FAQ)

Hvad er en Bing Maps API-nøgle?

En API-nøgle er en unik identifikator, der giver dig adgang til Bing Maps-tjenesterne. Den kræves for at kunne bruge API'erne og spore dit forbrug.

Hvordan håndterer jeg cross-domain anmodninger med jQuery?

Brug dataType: 'jsonp' og angiv jsonp-parameteren i dine jQuery AJAX-kald, når du interagerer med Bing Maps REST API.

Kan jeg bruge Bing Maps uden jQuery?

Ja, du kan bruge Bing Maps AJAX Control direkte med ren JavaScript. jQuery forenkler dog mange af disse operationer.

Hvad er forskellen på en master key og en query key?

En master key giver fuld adgang til at administrere dine datakilder (oprette, redigere, slette), mens en query key kun giver adgang til at forespørge data.

Hvordan kan jeg reducere omkostningerne ved Bing Maps API-kald?

Brug af session keys, som genereres fra kortet, til forespørgsler mod dine egne datakilder i Spatial Data Services, kan resultere i, at disse kald spores som ikke-fakturerbare transaktioner.

Hvis du vil læse andre artikler, der ligner Integrer Bing Maps med jQuery, kan du besøge kategorien Teknologi.