Intégration API Bing Maps |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
Tzar
Newbie Depuis le: 31 Mar 2019 Status: Inactif Points: 5 |
Options des messages
Thanks(0)
Envoyé : 31 Mar 2019 à 18:03 |
Bonjour,
Je souhaite intégrer une requête de localisation avec l'API Bing Maps pour afficher une adresse dans un champ de saisie texte qui s'auto-complète lors de la saisie. Cela se fait très bien dans une page html avec le code ci-dessous, mais je n'arrive pas à intégrer correctement ce code dans un champ de saisie texte dans openelement, rien ne s'affiche pour compléter l'adresse automatiquement. Merci pour votre aide et/ou vos idées. Code html : <!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> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/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: "<ma-clé-bing-maps>", 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) { $("#searchBox").empty().append('Result: ' + item.name); } </script> </head> <body> <div class="ui-widget"> <label for="searchBox"> Adresse : </label> <input id="searchBox" /> </div> </body> </html> |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Bloc de code HTML en header
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /> Bloc de code css en header .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #searchBox{ width: 25em; } Bloc de code javascript en header $(document).ready(function () { $("#searchBox").autocomplete({ source: function (request, response) { $.ajax({ url: "http://dev.virtualearth.net/REST/v1/Locations", dataType: "jsonp", data: { key: "<ma-clé-bing-maps>", 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) { $("#searchBox").empty().append('Result: ' + item.name); } Bloc de code visuel à l'endroit désiré <div class="ui-widget"> <label for="searchBox"> Adresse : </label> <input id="searchBox" /> </div> |
|
Tzar
Newbie Depuis le: 31 Mar 2019 Status: Inactif Points: 5 |
Options des messages
Thanks(0)
|
Merci Hobby001 mais c'est une des solutions que j'avais aussi essayée mais elle ne fonctionne pas, c'est ce que je ne comprends pas.
Je souhaiterais également pouvoir intégrer le code en utilisant un champ de saisie de texte d'openelement, sans utilisation d'un bloc de code visuel.
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Cette solution produit le même résultat que la page de code que vous avez fourni.
Il n'y a rien dans votre code pour afficher quoi que ce soit Edité par Hobby001 - 31 Mar 2019 à 19:29 |
|
Tzar
Newbie Depuis le: 31 Mar 2019 Status: Inactif Points: 5 |
Options des messages
Thanks(0)
|
C'est parce que je n'ai pas inclus dans le code ma clé Bing Maps.
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Donnez un lien avec votre page fonctionnelle hors d'openElement
|
|
Tzar
Newbie Depuis le: 31 Mar 2019 Status: Inactif Points: 5 |
Options des messages
Thanks(0)
|
Voila le code avec la clé :
<!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.10.2.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/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: "AtlI1B2zhaoG_lFUBzlco1BGH_a2qHdAKaWZ4XiPmM39As5UEKayrBKmDCk4GE2D", 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) { $("#searchBox").empty().append('Result: ' + item.name); } </script> </head> <body> <!-- <div> --> <div class="ui-widget"> <label for="searchBox"> Adresse : </label> <input id="searchBox" /> </div> </body> </html> |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
En effet,
Sur la page OpenElement l'adresse trouvée disparaît alors que dans la page créée avec un simple éditeur de texte, la valeur reste dans le champ input. Malheureusement, je quitte bientôt pour un peu plus d'une semaine. Je ne pourrai vous aider là-dessus. Edité par Hobby001 - 01 Avr 2019 à 00:00 |
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |