Remplacer une fonction par une autre

Version imprimable

20/05/2020, 16h18
luckycky

Remplacer une fonction par une autre

Bonjour,

Je cherche un solution (que je n'ai pas trouvée) pour changer les paramètres d'une fonction.
Je m'explique, j'affiche une map avec des coordonnées gps si l’utilisateur s'est déjà localisé auparavant, sinon j'affiche une carte mais sans sa localisation.
Je voudrais ajouter la possibilité de pouvoir se localiser juste en saisissant un code postal, je l'ai fait ça fonctionne, j'appelle une fonction qui me récupérer les coordonnées de se code postal.
Et ensuite je voudrais afficher la même Map mais avec ces coordonnées. Donc détruire celle afficher et afficher la nouvelle avec les paramètres passés dans ma fonction qui m’affine ma carte.
Pour passer de ma map vide à ma map pleine quand l'utilisateur se géolocalise j'ai utilisé du JS en cachant les div, mais je trouve ça lourd il y a redondance dans le code, pour afficher la carte avec le code postal je pourrais utiliser la même méthode, mais je pense qu'il y a surement une solution (que je n'ai pas trouvée) pour "écraser" la map déjà présente et la remplacer avec des nouvelles données par la même fonction
Voici comment j'appelle ma fonction, j'ai tenté du window.close puis recharger ma map avec les nouveaux paramètres mais ça n'a rien donné

Code:

window.onload = MapPleine(userlat, userlon);

Merci de votre aide!
27/05/2020, 18h49
NoSmoking

Bonjour,
j'ai eu du mal à voir où tu voulais en venir et je ne comprend pas pourquoi tu ne réutilises pas la même map, c'est habituellement le principe.

J'ai posté une contribution il y a peu : Rayon de 100 km autour d'un point, peut être qu'elle pourrait t'intéresser !
27/05/2020, 19h24
luckycky

Bonsoir,

Ahh c'est exactement ce que je cherche à faire (ce que vous avez fait). Alors excellente question, on va dire que je me suis pas embêté, ou j'ai pas trop réfléchit quand je l'ai faite. En faite, j'ai créé une fonction avec comme paramètres la latitude et longitude de la geolocalisation et une autre sans rien. J'avais surtout peur de pas pouvoir afficher la map si ma latitude et longitude étaient nul. Alors j'ai pas du essayer. Mais du coup comment avez vous fait pour afficher votre marqueur une fois la géolocalisation faite?
Merci de votre aide!
27/05/2020, 21h31
Doksuri

salut,

il a utilise la librairie leaflet (qui est vraiment excellente) leafletjs.com/

ils ont une documentation bien fournie leafletjs.com/reference-1.6.0.html ainsi que 2-3 exemples des possibilites leafletjs.com/examples.html

avec toute cette lecture, tu devrai pouvoir t'en sortir pour le marker ;)

En effet excellente librairie, j'ai trouvé ce qu'il me faut mais malheureusement je n'arrive pas à l'appliquer...
Je n'arrive pas à changer la position de mon marker dans ma fonction, mais j'arrive à la changer dans ma fonction qui initialise ma carte.
Voici mon code pour que ce soit plus clair, je pense que je n'arrive pas à accéder à ma variable marker dans ma fonction de changement.
Si jamais quelqu'un aurait une idée, un conseil...
Merci!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	var macarte = null;
            // Fonction d'initialisation de la carte
            function MapPleine(la,lo) {
                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                macarte = L.map('mappleine').setView([la, lo], 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('http://{s}.tile.osm.org/{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: 5,
                    maxZoom: 15
                }).addTo(macarte);
 
				//Choix marqeur pour ma géolocalisation
				var myIcon = L.icon({
					iconUrl: "./../Image/marqueur/malocalisation.png",
					iconSize: [50, 50],
					iconAnchor: [25, 50],
					popupAnchor: [-3, -76],
				});				
			var marker = L.marker([47,6]).addTo(macarte);
			//marker.setLatLng([40,6]);			
            }
 
	window.onload = MapPleine(46,8);
 
	 macarte.on('click', 
 
	 function(e){
		 alert("ok");
 
			marker.setLatLng([40,6]);
 
		 	});

Tu as un problème de scope, tu ne manipule pas le même marker avec tes lignes 21 et 32, ligne 21 le marker est local à ta fonction MapPleine, ligne 32 il est undefined et ce n'est pas le même.

Repart sur des bases simple, voir les exemples comme indiqué par Doksuri ;)
N'hésites pas à ouvrir la console pour voir les erreurs, F12.

Ton code revu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var macarte = null;
var marker;     // déclaraion globale
  // Fonction d'initialisation de la carte
  function MapPleine(la, lo) {
    // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
    macarte = L.map('mappleine').setView([la, lo], 5);
    // 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('http://{s}.tile.osm.org/{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: 5,
      maxZoom: 15
    }).addTo(macarte);
    //Choix marqeur pour ma géolocalisation
    var myIcon = L.icon({
      iconUrl: "./../Image/marqueur/malocalisation.png",
      iconSize: [50, 50],
      iconAnchor: [25, 50],
      popupAnchor: [-3, -76],
    });
    marker = L.marker([47, 6]).addTo(macarte);
  }
window.onload = MapPleine(46, 8);
macarte.on('click', function (e) {
  alert("ok");
  marker.setLatLng([40, 6]);
});