[Google Maps] Détection des coins de la carte google map

Détection des coins de la carte google map

Bonjour les amis,

Je rencontre un truc vraiment intéressante pour moi et peut être qu'elle le sera pour vous aussi

Description du problème :
J'ai des milliers des des markers à afficher sur une carte google map , le problème est que si j'afficherai tous ces markers à la fois , le navigateur se bloque.

Astuce recherchée
Alors j'ai réfléchi à chercher une solution pour détecter les coordonnées (latitude , longitude) des 4 coins d'une carte google map, pour n'afficher que les markers qui se situent la dedans

Est ce que vous avez une idée comment je peut faire cela , sachant que je sait la position du centre de la carte et aussi sa largeur et hauteur ?

Merci beaucoup :)

Bonsoir,

Citation:

Envoyé par betadev

Astuce recherchée
Alors j'ai réfléchi à chercher une solution pour détecter les coordonnées (latitude , longitude) des 4 coins d'une carte google map...

il existe la méthode getBounds() de l'objet google.maps.Map qui retourne un objet google.maps.LatLngBounds, qui contient les coordonnées du point SW et du point NE sous la forme d'objet google.maps.LatLng

Un exemple pour plus de clartée

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Récupération des bornes de la carte</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
html, body {
  height : 100%;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_carte{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
  // creation de la carte
  var oMap = new google.maps.Map(document.getElementById("div_carte"), {
    'zoom' : 6,
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // evenement sur click de la carte
  google.maps.event.addListener( oMap, 'click', function(){
    // get les limites
    var oLatLngBounds = this.getBounds();
    // get les points SW et NE
    var pointSW = oLatLngBounds.getSouthWest();
    var pointNE = oLatLngBounds.getNorthEast();
    // affiche le résultat
    alert( 'SW : ' +pointSW +'\nNE : ' +pointNE);
  });
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
 
</script>
</head>
<body>
<div id="div_main">
  <h1>[Google Maps API V3] Récupération des bormes de la carte</h1>
  <div id="div_carte"></div>
</div>
</body>
</html>

Bonjour,

Oui effectivement , c'est ce que je suis entrain de chercher.
J'ai trouvé aussi la méthode containsLatLng de cette objet qui permet de savoir si des coordonnées latilude et longitudes existent bien dans cet objet.

Merci à toi.

tu peux également regarder du coté de MarkerClusterer ou encore de MarkerManager pour gérer de grosse quantité de markers.