|
FOROS PROFESIONALES
WINDEV, WEBDEV y WINDEV Mobile |
| | | | | |
| Recherche d'alternative à google map WINDEV |
| Iniciado por leozeleba, 17,dic. 2018 10:51 - 9 respuestas |
| |
| | | |
|
| |
Miembro registrado
4 mensajes |
|
| Publicado el 17,diciembre 2018 - 10:51 |
Bonjour,
Je travail sur le développement d'un logiciel sur WINDEV dans lequel un utilisateur saisi deux adresses, puis le programme calcul la distance en km séparant ces deux points. Avant le logiciel utilisait l'API de google map cependant celle-ci est devenue payante, c'est pourquoi je cherche une alternative gratuite à google map.
Après avoir saisi les adresse, l'utilisateur doit pouvoir connaitre la distance (routière et pas à vol d'oiseau) entre un point A et un point B. Et dans un second temps, afficher le trajet sur une carte pour que l'utilisateur sache sur quel trajet le programme à calculé la distance.
Ma première solution était de récupérer les deux adresses et de les placer dans une URL de google map :
sHTML est une chaîne = ChaîneConstruit("https://www.google.fr/maps/dir/""%1""/""%2""", ...
Remplace(FEN_Menu.SAI_Départ," ","+") + ",+" + FEN_Menu.SAI_VilleDépart,Remplace(FEN_Menu.SAI_Arrivé," ","+") + ",+" + FEN_Menu.SAI_VilleArrivé)
sTmp est une chaîne = Remplace(Remplace(sHTML, """",""),"""","")
Ainsi je peux déjà :
1) Ouvrir la page dans un navigateur
2) Ouvrir la page dans un champs HTML
J'ai donc ouvert la page dans un champ HTML et avec ..ValeurAffichée je peux récupérer le code HTML. Après rien de plus simple que de le placer dans une chaine est d'aller chercher le kilometrage dans le code HTML. Malheureusement quand je met le code dans une chaine celui-ci est tronqué car il est beaucoup trop long pour être placé dans une chaine (~ 500 000 caractères) la chaine ne contient donc que 8133 caractère  .
Je n'ai donc pas cherché plus loin avec cette solution...
Je me suis interréssé à Open Street Map qui est libre et utilisé dans de nombreuses librairie, j'ai commencé à découvrir Leaflet qui est une librairie JavaScript.
Je crée un champ .NET (WebBrowser) dans lequel j'intègre un code HTML contenant une carte et deux point.
La carte s'affiche  !
Seulement il y a quelques problèmes :
--> Deux points s'affiche mais je n'arrive pas à afficher l'itinéraire entre ces deux points, il y a des erreur dans mon code mais je ne sais pas vraiment où...
Une erreur s'affiche :
Ligne : 28
Carctère : 1
Erreur : Impossible d'obtenir la propriète <<Control>> d'une référence null ou non définie
--> Ce sont des coordonnées GPS (Latitude, Longitude) qui doivent être utilisée par Leaflet... Il faut donc que je trouve une solution pour convertir des adresses en coordonées GPS.
Ci-dessous voici le code que je met dans mon .NET :
<html>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 640px; height: 480px;"></div>
<script>
var mymap = L.map('mapid').setView([1.369115, 103.845436], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiaG91cmNoYW5pIiwiYSI6ImNqbXhyczE1MDB4bTUza3BoZXZkMnI0emsifQ.AniQEtfLHqxrk1gfZTMrJA'
}).addTo(mymap);
var start = L.marker([1.29828408457,103.789110693]);
var end = L.marker([1.41887924373,103.847815159]);
start.addTo(mymap).bindPopup("Start from Office");
end.addTo(mymap).bindPopup("End in MyHome");
var routingControl = new L.Routing.Control({
waypoints: [start,end],
show: true
}).router().addTo(map);
</script>
</body>
</html>
Ce que j'aimerai en priorité c'est récupérer la distance entre 2 points donc, il n'y a pas vraiment besoin d'afficher une carte pour ça… Cependant c'est mieux pour l'utilisateur de voir par où le logiciel le fait passer pour une distance donnée.
J'espère avoir bien exposé ce que je cherche à faire, ci quelqu'un trouve une bonne solution il recevra ma reconnaissance éternelle. |
| |
| |
| | | |
|
| | |
| |
| Publicado el 19,diciembre 2018 - 10:55 |
J'ai modifié un peu mon code pour qu'il soit un peu plus claire :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script type="text/javascript">
// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = 1.369115;
var lon = 103.845436;
var macarte = null;
var start = L.marker([1.29828408457,103.789110693]);
var end = L.marker([1.41887924373,103.847815159]);
// Fonction d'initialisation de la carte
function initMap() {
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 11);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
// Il est toujours bien de laisser le lien vers la source des données
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
start.addTo(macarte).bindPopup("Start from Office");
end.addTo(macarte).bindPopup("End in MyHome");
// L'erreur semble être ici
var routingControl = new L.Routing.Control({
waypoints: [start,end],
show: true
}).addTo(map);
}
window.onload = function(){
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
initMap();
};
</script>
<style type="text/css">
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
height:400px;
}
</style>
<title>Carte</title>
</head>
<body>
<div id="map">
<!-- Ici s'affichera la carte -->
</div>
</body>
</html> |
| |
| |
| | | |
|
| | |
| |
Miembro registrado
1.330 mensajes |
|
| Publicado el 20,diciembre 2018 - 11:10 |
| |
| |
| | | |
|
| | |
| |
| Publicado el 20,diciembre 2018 - 11:40 |
Le 20/12/2018 à 10:10, Daryl a écrit :
Bonjour Daryl
Juste une question ... comment installer cet api
je ne la trouve pas
BAT |
| |
| |
| | | |
|
| | |
| |
Miembro registrado
1.330 mensajes |
|
| Publicado el 20,diciembre 2018 - 13:56 |
Salut Marcel,
L'API Google ne doit pas être installée, mais il faut l'activer.
Pour cela tu vas dans ta console de dévelopeur
1. Va sur le lien: https://console.developers.google.com
2. Ensuite tu sélectionnes les identifiants dans le menu à gauche
3. Tu cliques sur le bouton bleu "Créer des identifiants"
4. Tu prends l'option "Clé API"
5. Google te crée une clé, je te conseille vivement de la restreindre pour éviter tout abus de cette clé
5.1 Restriction relative aux applications
5.1.1 Aucune (à éviter)
5.1.2 Référent HTTP (à utiliser si les cartes son sur ton site, il te faudra donner le nom de domaine)
5.1.3 Adresse IP (à utiliser si c'est une application qui se trouve sur un serveur, faut que ton adresse IP soit statique si tu veux pas modifier régulièrement)
5.1.4. Application Android
5.1.5. Application iOS
5.2 Restriction relative aux API
5.2.1. Tu sélectionnes l'API qui t'intéresse (pour les cartes tu prends "MAPS JavaScript API"
Voilà 
A+
Daryl
--
http://www.concept4u2.com |
| |
| |
| | | |
|
| | |
| |
| Publicado el 21,diciembre 2018 - 05:04 |
Le 20/12/2018 à 12:56, Daryl a écrit :
Salut Marcel, L'API Google ne doit pas être installée, mais il faut l'activer. Pour cela tu vas dans ta console de dévelopeur 1. Va sur le lien: https://console.developers.google.com2. Ensuite tu sélectionnes les identifiants dans le menu à gauche 3. Tu cliques sur le bouton bleu "Créer des identifiants" 4. Tu prends l'option "Clé API" 5. Google te crée une clé, je te conseille vivement de la restreindre pour éviter tout abus de cette clé 5.1 Restriction relative aux applications 5.1.1 Aucune (à éviter) 5.1.2 Référent HTTP (à utiliser si les cartes son sur ton site, il te faudra donner le nom de domaine) 5.1.3 Adresse IP (à utiliser si c'est une application qui se trouve sur un serveur, faut que ton adresse IP soit statique si tu veux pas modifier régulièrement) 5.1.4. Application Android 5.1.5. Application iOS 5.2 Restriction relative aux API 5.2.1. Tu sélectionnes l'API qui t'intéresse (pour les cartes tu prends "MAPS JavaScript API" Voilà A+ Daryl -- http://www.concept4u2.com
Salut Daryl
Tout d'abord passe de très bonnes fêtes et ... un tout grand merci je
vais tester tout cela
J'étais repasser à l'envoi sur une page Internet directement mais cela
ne fait pas très ....
A+
Marcel |
| |
| |
| | | |
|
| | |
| |
| Publicado el 21,diciembre 2018 - 16:36 |
Merci d'avoir pris le temps de me répondre, j'ai pour consigne de base de ne pas utiliser google map.
Pour mon problème j'ai trouvé la solution moi même :
--> pour afficher l'itinéraire j'utilisais un mauvais lien (leaflet-routing-machine)
la bonne :
<script src="//unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
--> pour convertir des adresses en coordonnées GPS j'ai trouvé une solution :
j'utilise une requête HTTP Ajax (synchrone) pour interroger Notanim
Pour les intéressés la doc est claire pour moi : https://wiki.openstreetmap.org/wiki/FR:Nominatim
--> pour récupérer la distance et la durée de l'itinéraire j'utilise totalDistance et totalTime de IRouteSummary
Bon... ça me fait passer par un chemin fastidieux ^^' : je prend l’événement routesfound de Routing.Control puis
routingResultEvent.routes[0].summary.totalDistance (resultat en mètres) et
routingResultEvent.routes[0].summary.totalTime (resultat en secondes)
--> après mon autre problème est que l'itinéraire n'est pas trouvé à tout les coups...
Donc j'ajoute un écouteurs sur l’événement routingerror qui relance la recherche et je passe mon curseur en "wait"
Pour le curseur : https://stackoverflow.com/questions/9681080/changing-cursor-to-waiting-in-javascript-jquery
Un petit lien vers mon code que vous pourrez tester en ligne : https://js.do/leozeleba/test-map
Je préfère utiliser OSM qui est libre et être assuré à ne pas dépenser 1 centimes.  |
| |
| |
| | | |
|
| | |
| |
| Publicado el 21,diciembre 2018 - 16:36 |
Merci d'avoir pris le temps de me répondre, j'ai pour consigne de base de ne pas utiliser google map.
Pour mon problème j'ai trouvé la solution moi même :
--> pour afficher l'itinéraire j'utilisais un mauvais lien (leaflet-routing-machine)
la bonne :
<script src="//unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
--> pour convertir des adresses en coordonnées GPS j'ai trouvé une solution :
j'utilise une requête HTTP Ajax (synchrone) pour interroger Notanim
Pour les intéressés la doc est claire pour moi : https://wiki.openstreetmap.org/wiki/FR:Nominatim
--> pour récupérer la distance et la durée de l'itinéraire j'utilise totalDistance et totalTime de IRouteSummary
Bon... ça me fait passer par un chemin fastidieux ^^' : je prend l’événement routesfound de Routing.Control puis
routingResultEvent.routes[0].summary.totalDistance (resultat en mètres) et
routingResultEvent.routes[0].summary.totalTime (resultat en secondes)
--> après mon autre problème est que l'itinéraire n'est pas trouvé à tout les coups...
Donc j'ajoute un écouteurs sur l’événement routingerror qui relance la recherche et je passe mon curseur en "wait"
Pour le curseur : https://stackoverflow.com/questions/9681080/changing-cursor-to-waiting-in-javascript-jquery
Un petit lien vers mon code que vous pourrez tester en ligne : https://js.do/leozeleba/test-map
Je préfère utiliser OSM qui est libre et être assuré à ne pas dépenser 1 centimes. |
| |
| |
| | | |
|
| | |
| |
| Publicado el 21,diciembre 2018 - 16:37 |
Joyeux noël  |
| |
| |
| | | |
|
| | |
| |
Miembro registrado
50 mensajes |
|
| Publicado el 22,diciembre 2018 - 09:43 |
Bonjour, bravo pour ce code, j'ai justement écrit hier à PCSOFT pour essayer d'avoir dans une prochaine LST ce genre de code sans passer par Google maps. Par contre mes connaissances en javascript sont limitées, étant donnée que j'ai une boucle en Wlangage qui doit me calculer la distance pour chaque athlète de son domicile au lieu de la compétition et remplir le champ KM, comment est-ce que je dois traiter ton code en javascript.
D'avance merci et joyeuses fêtes |
| |
| |
| | | |
|
| | | | |
| | |
| | |
| |
|
|
|