Discussion :

[Lazaa]

Bonjour à tous,

Comme je serai amener à avoir plusieurs milliers de markers sur ma carte, j'aimerai n'afficher que ceux dans le viewport en cours pour ne pas surcharger la carte.

J'ai donc fait en sorte que mon fichier XML ne charge de la BDD que ceux-ci, et ca fonctionne bien.
Seulement sur la carte, je n'ai maintenant plus qu'un seul marker qui charge. Si je bouge la carte, les autres chargent et comme les premiers chargés ne s'effacent pas, je récupère tous mes points au final....

Mais au chargement, je n'ai donc qu'un marker qui apparait.
Avez vous une idée du soucis ?

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
///////////////////////// Affichage de la carte /////////////////////////////////////////////////////////////////////////////////////
 
function showMap() {
    document.getElementById("map").style.display = "block";
    var mapOptions = {
        zoom: 6,
		minZoom: 3,
        center : new google.maps.LatLng(48, 5),
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
		zoomControlOptions: {
        	style: google.maps.ZoomControlStyle.LARGE,
        	position: google.maps.ControlPosition.RIGHT_BOTTOM
    	}, <!-- zoomControlOptions -->
		panControl: false,
		mapTypeControl: false,
		streetViewControl: false,
    }; <!-- var mapOptions -->
 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
	google.maps.event.addListener(map, 'tilesloaded', function () { loadMapFromCurrentBounds(map);} ); 
 
    var infoWindow = new google.maps.InfoWindow;
}  <!-- function showMap -->
 
///////////////////////// Recherche des données dans le fichier XML et placement des markers////////////////////////////////////////////////////////////////////
 
function loadMapFromCurrentBounds() {
 
    var bounds = map.getBounds();
 
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();
 
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();
 
	downloadUrl("donnees_xml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
        var id = markers[i].getAttribute("id");
        var pseudo = markers[i].getAttribute("pseudo");
        var avatar = markers[i].getAttribute("avatar");
        var ville = markers[i].getAttribute("ville");
	var zipcode = markers[i].getAttribute("zipcode");
	var pays = markers[i].getAttribute("pays");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
        var html =    '<a href="profil.php?ID='+ id +'" style="color: rgba(0,0,0,0.8)"><div style="text-align: left; font-family: arial; font-size: 12px; margin: 0;">'+
		  				'<img src="http://localhost:8888/mobile/photos/avatars/' + avatar + '" class="avatar" alt="avatar" style="margin: 0 10px 0 0;">' +
		  				"<b>" + pseudo + "</b> <br/>" + ville +", "+ zipcode +" (" + pays +")" +
						'</div></a>';
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          }); <!-- var marker -->
       bindInfoWindow(marker, map, infoWindow, html);
        } <!-- for ... -->
    }); <!-- downloadUrl -->
	}
 
//////////////////////////////////////////////////////////////////
 
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
	function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

Merci !
Florian

[NoSmoking]

Bonjour,
je ne sais pas si cela est voulu mais les commentaires lus dans ton code ne sont pas orthodoxes ex: <!-- zoomControlOptions -->.

j'aimerai n'afficher que ceux dans le viewport en cours pour ne pas surcharger la carte.

Google s'en occupe pour toi, il ne charge/affiche que ce qui est visible.

[Lazaa]

mais les commentaires lus dans ton code ne sont pas orthodoxes

Oups... en effet. Je débute en JS et j'ai utilisé mes réflexes de html.
J'aurais mieux fais de prendre ceux de php il me semble

Google s'en occupe pour toi, il ne charge/affiche que ce qui est visible.

D'après ce que je comprends de la documentation google (https://developers.google.com/maps/a...ymarkers?hl=en) ca n'est pas le cas par défaut.



Ci dessous l'extrait expliquant la méthode à appliquer :

First attach a listener to the map idle event to make it execute a function called showMarkers() when the map stops panning.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  google.maps.event.addListener(map, 'idle', showMarkers);

Note that you could listen to the bounds_changed event but it fires continuously as the user pans; instead, the idle will fire once the user has stopped panning/zooming.

Then add the function showMarkers. This function gets the current viewport bounds by calling map.getBounds() which returns a object that has the NorthEast and SouthWest LatLng points of the bounds. With the bounds information you can send a request to your server (preferably with AJAX) to get the markers that are within those bounds.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function showMarkers() {
    var bounds = map.getBounds();
 
    // Call you server with ajax passing it the bounds
 
    // In the ajax callback delete the current markers and add new markers
  }
With the new list of markers you can remove the current markers (marker.setMap(null)) that are on the map and add the new ones (marker.setMap(map)).

C'est plus ou moins ce que j'essai de faire (XML) mais je rencontre le problème expliqué plus haut.
Je ne vois pas non plus comment supprimer les markers qui disparaissent du viewport...

[Lazaa]

Ah aussi...

...J'aimerai pouvoir faire fonctionner cette technique afin de remplir une sidebar qui donne une description des différents markers de la carte... et qui évolue dès que l'on se déplace sur la carte.
Je pensais donc récupérer les données restreintes au viewport du fichier XML. Est ce la technique a employer ?

Merci

[NoSmoking]

j'ai pris le viewport comme étant la carte affichée.

Le lien fourni montre les possibilités qui sont offertes pour gérer l'affichage des markers, j'ai donc un soucis de compréhension de ton problème.

Tu peux afficher les markers ou non en testant leur position par rapport à un objet LatLngBounds que tu peux définir, mais est ce vraiment ton problème?.

[Lazaa]

Tu peux afficher les markers ou non en testant leur position par rapport à un objet LatLngBounds que tu peux définir

oui c'est ce que j'ai fait dans ces lignes mais cela ne fonctionne pas. J'ai un seul marker qui s'affiche a la fois

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
[...]
var bounds = map.getBounds();
 
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();
 
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();
 
	downloadUrl("donnees_xml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) {
[...]