Les services REST Bing Maps nous permettent d'effectuer des tâches telles que la création d'une carte avec des punaises, le géocodage d'une adresse, la récupération de métadonnées des images, ou la création d'un itinéraire.
Ici, nous allons apprendre à utiliser l'API Locations des services REST Bing Maps pour construire une zone de saisie semi-automatique avec jQuery. Pour utiliser les services REST Bing Maps, vous aurez besoin d'une clé Bing Maps. Il suffit d'aller sur le Bing Maps Account Center pour en obtenir une.
Création
Tout d'abord, nous allons créer une simple page HTML en ajoutant les références à jQuery et jQuery UI, une zone de saisie pour la localisation recherchée et une div dans laquelle les résultats seront affichés.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #searchBox { width: 25em; } </style> </head> <body> <div> <div class="ui-widget"> <label for="searchBox"> Search: </label> <input id="searchBox" /> </div> <div id="searchResult" class="ui-widget" style="margin-top: 1em;"> </div> </div> </body> </html>
Pour appeler l'API Locations, nous utilisons l'adresse suivante : http://dev.virtualearth.net/REST/v1/Locations
Les paramètres qui suivent sont nécessaires pour obtenir une réponse du service :
Les services REST Bing Maps ont également d'autres paramètres optionnels tels que :
Pour créer une zone de saisie semi-automatique, nous utilisons jQuery UI. La source des suggestions fournies à l'utilisateur viendra des services REST Bing Maps.
Le fonctionnement est le suivant : lorsque l'utilisateur tape une localisation, une requête Ajax est déclenchée pour appeler l'API Locations des services REST Bing Maps et une réponse JSON est reçue. La réponse est traitée pour être affichée sous forme de suggestions à l'utilisateur. Voici le code JavaScript pour obtenir ce comportement :
<script type="text/javascript"> $(document).ready(function () { $("#searchBox").autocomplete({ source: function (request, response) { $.ajax({ url: "http://dev.virtualearth.net/REST/v1/Locations", dataType: "jsonp", data: { key: "<yourbingmapskey>", q: request.term }, jsonp: "jsonp", success: function (data) { var result = data.resourceSets[0]; if (result) { if (result.estimatedTotal > 0) { response($.map(result.resources, function (item) { return { data: item, label: item.name + ' (' + item.address.countryRegion + ')', value: item.name } })); } } } }); }, minLength: 1 }); }); </script>
Il faut prêter attention à plusieurs choses ici :
Par exemple, lorsqu'un utilisateur cherche "San Francisco", l'URL de requête Ajax suivante est construite et appelée :
http://dev.virtualearth.net/REST/v1/Locations?jsonp=<callbackname>&key=<yourbingmapskey>&q=San+francisco&_=1298745707161
La source finale de la page est la suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #searchBox { width: 25em; } </style> <script type="text/javascript"> $(document).ready(function () { $("#searchBox").autocomplete({ source: function (request, response) { $.ajax({ url: "http://dev.virtualearth.net/REST/v1/Locations", dataType: "jsonp", data: { key: "<yourbingmapskey>", q: request.term }, jsonp: "jsonp", success: function (data) { var result = data.resourceSets[0]; if (result) { if (result.estimatedTotal > 0) { response($.map(result.resources, function (item) { return { data: item, label: item.name + ' (' + item.address.countryRegion + ')', value: item.name } })); } } } }); }, minLength: 1, change: function (event, ui) { if (!ui.item) $("#searchBox").val(''); }, select: function (event, ui) { displaySelectedItem(ui.item.data); } }); }); function displaySelectedItem(item) { $("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' + item.point.coordinates[1] + ')'); } </script> </head> <body> <div> <div class="ui-widget"> <label for="searchBox"> Search: </label> <input id="searchBox" /> </div> <div id="searchResult" class="ui-widget" style="margin-top: 1em;"> </div> </div> </body> </html>
Vidéo de démonstration (En anglais)
Liens
Plusieurs liens qui vous aideront à comprendre et aller plus loin sur le sujet :
En résumé
Nous avons vu comment utiliser les services REST Bing Maps avec jQuery, jQuery UI pour construire une zone de saisie semi-automatique afin de trouver une localisation dynamiquement. Comme nous utilisons HTML, JSON et jQuery, cela peut être intégré avec la technologie que vous préférez.
Si vous souhaitez aller plus loin sur le sujet, regardez les liens ci-dessus pour comprendre ce que vous pouvez faire avec les services REST Bing Maps. Par exemple, nous pourrions afficher la localisation sélectionnée sur une carte avec le contrôle Bing Maps AJAX ou le contrôle Bing Maps Silverlight. Ce sera certainement le sujet d'un de mes prochains articles, en complément de celui-ci.
Vous pouvez télécharger les sources complète ici :
N'hésitez pas à commenter ou à me contacter si vous avez des questions à propos de cet article.
Nice post. I'm sure people will find this useful.
Thanks so much for such an informative post!
This is a wonderful post. It really brings Bing Maps to a new level. So much better than the approach offered by the Bing Maps Ajax control SDK. I like that it integrates into jQuery.
A note that wouldn't fit in last comment. The curly bracket following the "response" statement must be on the same line (cannot be moved to its own line). Otherwise errors about unrecognized parms.
Great article. This was the perfect fit for what I need to match google maps updated autocomplete method.
Is there an easy way to ONLY show a certain region like the US or UK?
Grate One. It is very help full for me. Thanks for writing this post.
Legend! This has just saved me hours of research. I need to call a different REST service, but the pattern is exactly what you described and with a great working example. Thanks ever so much!
I loved your post.Much thanks again.
Merci pour cette démonstration.
Really helpful. Very simple to understand. Merci.