DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Carte
  • Présentation du champ Carte
  • Créer un champ de type Carte
  • Popup d'affichage des marqueurs
  • Affichage et manipulation des cartes
  • Affichage des cartes
  • Manipulation des cartes par l'utilisateur
  • Spécificités
  • Chromium CEF
  • Modification des permissions
  • Champ Carte et Licence Google
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation du champ Carte
Le champ Carte permet d'afficher une carte afin de se géolocaliser, d'afficher des points d'intérêt (P.O.I), ...
Cette carte provient :
  • Android du service Google Maps pour les applications Android.
    Attention : L'utilisation d'un champ Carte est soumise à des conditions d'utilisation spécifiques. Pour plus de détails, consultez la page d'aide Conditions d'utilisation du champ Carte. Vérifiez la licence Google avant de déployer vos applications.
  • iPhone/iPad du service géolocalisation de Apple pour les applications iPhone/iPad à partir de iOS 6.
    Remarques :
    • Pour les applications iPhone/iPad sous iOS 5, le service Google Maps est utilisé.
    • Il est nécessaire de se conformer à la licence du service utilisé.
  • WINDEVWEBDEV - Code ServeurPHP du service Google Maps pour les sites Web via Google Maps API.
    L'utilisation du champ Carte est soumis à des conditions d'utilisations spécifiques. Selon le mode d'utilisation, il peut être nécessaire d'utiliser une clé Google (fonction CarteLicenceGgl). Vérifiez la licence Google avant de déployer vos applications.
    Nouveauté 2024
    WINDEV Attention : L'utilisation du champ Carte impose l'utilisation de Windows 10 minimum pour le poste utilisateur.
  • Universal Windows 10 App du service Bing Maps pour les applications en mode Universal Windows 10 App.
    Attention :
    • L'utilisation du champ Carte est soumis à des conditions d'utilisations spécifiques. Il est nécessaire d'utiliser une clé Bing (fonction CarteLicenceBing). Vérifiez la licence Bing avant de déployer vos applications.
    • Le positionnement dans le champ Carte via une adresse spécifiée à l'aide d'une chaîne de caractères peut donner des résultats incohérents. Il est conseillé d'utiliser plutôt un positionnement via une variable de type Adresse ou de type géoPosition.
La carte affichée est interactive : il est possible de zoomer, de se déplacer, etc. Elle peut être affichée sous forme graphique ou sous forme de vue satellitaire.

Créer un champ de type Carte

Pour créer un champ de type Carte :
  1. Sous le volet "Création", dans le groupe "Champs graphiques", cliquez sur "Carte".
  2. Cliquez dans la fenêtre ou la page à la position où le champ doit être créé.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
L'onglet "Général" permet de définir :
  • le mode d'affichage : plan ou satellite,
  • l'affichage ou non des informations concernant le trafic.
  • WINDEVWEBDEV - Code ServeurUniversal Windows 10 AppAndroidPHP l'affichage ou non des boutons de zoom dans le champ,
  • AndroidiPhone/iPad l'affichage de la boussole.
  • l'image utilisée pour les marqueurs des points d'intérêt (P.O.I.).
    Android Ces marqueurs peuvent être affichés avec une ombre ou non.
  • la popup affichée par défaut lors du clic sur un marqueur. Cette popup peut correspondre à :
    • Aucune : la popup utilisée sera celle proposée par défaut.
    • WINDEVUniversal Windows 10 AppAndroidiPhone/iPad Fenêtre prédéfinie : Dans ce cas, une fenêtre interne est automatiquement intégrée dans votre projet.
    • WEBDEV - Code Serveur Page prédéfinie : Dans ce cas, une page interne est automatiquement intégrée dans votre projet.
    • WINDEVUniversal Windows 10 AppAndroidiPhone/iPad une fenêtre interne de votre projet.
    • WEBDEV - Code Serveur une page interne de votre projet.
L'onglet "Détail" permet de définir :
  • WINDEV la mise à l'échelle par double clic,
  • WEBDEV - Code ServeurAndroidiPhone/iPad les options de gesture :
    • AndroidiPhone/iPad Autoriser le zoom.
    • AndroidiPhone/iPad Autoriser la rotation.
    • AndroidiPhone/iPad Autoriser le scroll.
    • AndroidiPhone/iPad Autoriser l'inclinaison.
    • WEBDEV - Code Serveur autoriser la mise à l'échelle par double tap.
  • WINDEVUniversal Windows 10 AppAndroidiPhone/iPad la mémorisation de la dernière position affichée.
Remarques :
  • AndroidiPhone/iPad Un seul champ Carte peut être utilisé dans une fenêtre. Il n'est pas possible d'utiliser plusieurs champs Carte dans la même fenêtre.
  • WINDEV Le champ Carte n'est pas manipulable par les tests automatiques.
  • AndroidiPhone/iPad La fonction géoLanceAppli permet de lancer l'application de cartographie native de l'appareil.

Popup d'affichage des marqueurs

Lors de l'utilisation d'une fenêtre prédéfinie ou d'une page prédéfinie pour gérer la popup des marqueurs, les éléments suivants sont intégrés selon la plateforme utilisée :
  • WINDEV la fenêtre interne FI_WinDevPopupMarqueur_WD (cette fenêtre est contenue dans le composant WDFAA).
  • WINDEV Mobile la fenêtre interne FI_WinDevPopupMarqueur_WM (cette fenêtre est contenue dans le composant WDFAA).
  • WEBDEV - Code Serveur la page interne PI_WEBDEVPopupMarqueur.
Ces éléments contiennent :
  • deux champs permettant d'afficher le nom et la description du marqueur.
  • un code de déclaration permettant de manipuler la variable de type Marqueur en cours.
Affichage et manipulation des cartes

Affichage des cartes

A l'ouverture de la fenêtre contenant un champ Carte, une carte du monde est automatiquement affichée : la carte est centrée sur l'Europe avec un niveau de zoom moyen.
WINDEVUniversal Windows 10 AppAndroidiPhone/iPad Il est possible d'afficher la dernière position mémorisée : il suffit de sélectionner l'option "Mémoriser la dernière position affichée" dans l'onglet "Détail" de la fenêtre de description du champ Carte. Dans ce cas, la dernière position est affichée avec le même niveau de zoom.

Manipulation des cartes par l'utilisateur

L'utilisateur peut se déplacer dans la carte :
  • Universal Windows 10 AppAndroidiPhone/iPad en la faisant défiler avec un ou plusieurs doigts.
  • WINDEVWEBDEV - Code ServeurPHP en la faisant défiler à l'aide de la souris.
  • WINDEVWEBDEV - Code ServeurUniversal Windows 10 AppAndroidPHP via les boutons de positionnement du champ (si l'option "Afficher les boutons de zoom" a été sélectionnée dans l'onglet "Général" de la fenêtre de description du champ).
L'utilisateur peut zoomer ou dé-zoomer :
  • WINDEVWEBDEV - Code ServeurUniversal Windows 10 AppAndroidPHP en utilisant les boutons de zoom du champ (si l'option a été sélectionnée dans l'onglet "Général" de la fenêtre de description du champ).
  • Universal Windows 10 AppAndroidiPhone/iPad en effectuant un geste de type "scale" (ou "pinch") : un écartement de deux doigts sur l'écran permet de zoomer et un rapprochement de deux doigts sur l'écran permet de dé-zoomer.
  • Universal Windows 10 AppAndroid en effectuant un "double tap" sur la carte pour zoomer d'un niveau sur une position (si l'option a été sélectionnée dans l'onglet "Général" de la fenêtre de description du champ).
  • WINDEV en effectuant un double-clic sur la carte pour zoomer d'un niveau sur une position (si l'option a été sélectionnée dans l'onglet "Général" de la fenêtre de description du champ).
  • par programmation avec la propriété Zoom.
AndroidiPhone/iPad Si l'option de gesture "Autoriser le zoom" est désactivée (option de l'onglet "Détail" de la description du champ ou propriété AvecZoom), l'utilisateur ne pourra pas zoomer ou dézoomer.
AndroidiPhone/iPad Remarque : Des événements optionnels spécifiques au champ Carte peuvent également être utilisés. Pour plus de détails, consultez Evénements associés au champ Carte.
WINDEVWEBDEV - Code ServeurPHP Pour connaître toutes les manipulations disponibles en exécution, consultez Champ Carte : Fonctionnalités Automatiques de vos Applications (FAA).
Spécificités
WINDEV

Chromium CEF

Dans une application WINDEV, le champ Carte est basé sur Chromium CEF.
Android

Modification des permissions

L'utilisation d'un champ Carte entraîne l'ajout automatique de la permission INTERNET à la liste des permissions requises par l'application.

Champ Carte et Licence Google

WINDEVWEBDEV - Code ServeurAndroidPHP Attention : Licence Google
Il est obligatoire de spécifier une clé de licence pour utiliser le service de cartographie service.
Vous devez posséder un compte Développeur Google pour obtenir une clé Google Maps API. Consultez la licence Google pour connaître les conditions d'utilisation (service gratuit ou payant, quota d'utilisation, etc.).
Lorsque le compte développeur est disponible, vous devez :
  1. Générer la clé dans la console développeur de Google (https://console.developers.google.com). Les manipulations à réaliser sont les suivantes (à la date d'écriture de cette page) :
    • Utilisez un compte Google pour se connecter à la console développeur.
    • Créez un projet si nécessaire.
    • Cliquez sur "Activer des API et des services".
    • Cliquez sur "Maps JavaScript API".
    • Cliquez sur "Activer" afin d'activer l'API Google Maps JavaScript API.
    • Cliquez sur la rubrique "Identifiants". Dans la page qui s'affiche, cliquez sur le lien "Identifiant des API et services".
    • Cliquez sur "Créer des identifiants".
    • Sélectionnez "Clé d'API".
    • Validez la création de la clé, puis copiez la clé créée par Google.
  2. Indiquer la clé utilisée dans l'application ou le site grâce à la fonction CarteLicenceGgl.
Liste des exemples associés :
Le champ Carte Exemples unitaires (WEBDEV) : Le champ Carte
[ + ] Utilisation du champ Carte de WEBDEV.
Il permet d'afficher une carte comprenant des marqueurs et également d'afficher un itinéraire.
Le champ Carte Exemples unitaires (WINDEV) : Le champ Carte
[ + ] Utilisation du champ Carte de WINDEV.
Il permet d'afficher une carte comprenant des marqueurs et également d'afficher un itinéraire.
La fonction gglRécupèreCarte Exemples unitaires (WINDEV) : La fonction gglRécupèreCarte
[ + ] Utilisation de la fonction gglRécupèreCarte pour afficher une carte Google dans un champ Image.
WM Geolocalisation Exemples multiplateforme (WINDEV Mobile) : WM Geolocalisation
[ + ] Cet exemple présente comment gérer des recherches de proximité avec géolocalisation :
- recherche autour de moi
- recherche dans une ville, à une adresse donnée, proche d'une adresse.
Les résultats apparaissent dans une zone répétée et dans une carte avec des marqueurs.
WM Sports Exemples multiplateforme (WINDEV Mobile) : WM Sports
[ + ] Cet exemple est une application de sport vous permettant d'enregistrer vos performances.
L'application calcule la distance parcourue, le temps, la vitesse moyenne et le nombre de calories dépensées en fonction du sport pratiqué.
Le parcours réalisé est affiché sur un champ carte grâce à des marqueurs et un tracé d'itinéraire.
Si vous disposez d'une montre Apple Watch, vous pourrez piloter WM Sports avec votre montre !

L'exemple dispose aussi d'une partie serveur qui sert à la synchronisation des données des utilisateurs.
Ce webservice est disponible dans l'exemple WEBDEV "WW_Sports".
Version minimum requise
  • Version 17
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 23/02/2024

Signaler une erreur ou faire une suggestion | Aide en ligne locale