BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - Intégration API Bing Maps
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Intégration API Bing Maps

 Répondre Répondre
Auteur
Message
Tzar allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 31 Mar 2019
Status: Inactif
Points: 5
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Tzar Citer  RépondreRéponse Lien Direct à ce Post Sujet: Intégration API Bing Maps
    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>


Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 19:05
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>

Haut de la page
Tzar allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 31 Mar 2019
Status: Inactif
Points: 5
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Tzar Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 19:24
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. 
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 19:29
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
Haut de la page
Tzar allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 31 Mar 2019
Status: Inactif
Points: 5
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Tzar Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 19:55
C'est parce que je n'ai pas inclus dans le code ma clé Bing Maps. 

Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 20:05
Donnez un lien avec votre page fonctionnelle hors d'openElement
Haut de la page
Tzar allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 31 Mar 2019
Status: Inactif
Points: 5
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Tzar Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 20:11
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>


Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2019 à 23:59
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
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.