Creer plusieurs rectangles modifiables avec l'api Google maps v3

Version imprimable

Bonjour,

Avec l'API Google Maps v3 je n'arrive pas à créer plusieurs rectangles, en effet j'arrive à en créer un avec des marqueurs crées à l'aide d'un click gauche, puis à modifier leur positions pour que le rectangle se retrace mais je n'arrive pas à creer plusieurs rectangle (nombre non defini)
En fait je pense que je m'emmèle les pinceaux avec les variables locales et globales
je vous met mon code qui créer un rectangle sur l'evenement click gauche.

Je suis conscient que mon soucis est algorithmique, l'ideal serait de créer une Array de rectangle

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
/* Déclaration des variables  */
var carte;
var tabMarqueurs2 = new google.maps.MVCArray();
var p_latlng_SW;
var p_latlng_NE;
var distance;
var latlng;
var options;
 
var marker_rect_1a;
var marker_rect_2a;
 
var rectangle = null;
 
var LatLngBoundsduRectangle;
 
 
function pair(chiffre) {
    chiffre = parseInt(chiffre);
    return ((chiffre & 1) == '0') ? true : false;
}
 
function initialiser() {
 
   //position de depart (Paris)
    latlng = new google.maps.LatLng(48.856614, 2.3522219000000177);
 
    //Option de l'affichage de depart
    options = {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    /* Chargement de la carte  */
    carte = new google.maps.Map(document.getElementById("carte"), options);
 
    //Listener pour l'evenement du clic pour creer un RECTANGLE
    google.maps.event.addListener(carte, 'click', function(event) {
        if (tabMarqueurs2.length == 0) {
            marker_rect_1a = new google.maps.Marker({
                map: carte,
                position: event.latLng,
                icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
                draggable: true
            });
 
            //  Gestionnaire d'evenement qd on fini le deplacement du marqueur (du rectangle)
            google.maps.event.addListener(marker_rect_1a, 'dragend', function(event) {
                initRectangle(marker_rect_1a, marker_rect_2a);
            });
            tabMarqueurs2.push(marker_rect_1a);
        }
        if (tabMarqueurs2.length == 1) {
            alert('2e ');
            marker_rect_2a = new google.maps.Marker({
                map: carte,
                position: event.latLng,
                icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
                draggable: true
            });
            tabMarqueurs2.push(marker_rect_2a);
            initRectangle(marker_rect_1a, marker_rect_2a);
 
            //  Gestionnaire d'evenement qd on fini le deplacement du marqueur (du rectangle)
            google.maps.event.addListener(marker_rect_2a, 'dragend', function(event) {
                initRectangle(marker_rect_2a, marker_rect_1a);
            });
         }
    });
 
}
/*----------------------------------------------------------------*/
/*------------------------RECTANGLE-------------------------------*/
/*----------------------------------------------------------------*/
 
//METHODE QUI VERIFIE SI UN POINT EST DANS LE RECTANGLE
function contient(point_a_Verif) {
    if (booRectangle) {
        var lat_bounds = new google.maps.LatLngBounds(LatLngBoundsduRectangle.getSouthWest(), LatLngBoundsduRectangle.getNorthEast());
 
        if (lat_bounds.contains(point_a_Verif)) {
            return true;
        }
        else {
            return false;
        }
    }
    else return false;
}
 
// Appelé lors de la MODIFICATION des points d'un rectangle
function initRectangle(p_marker1, p_marker2) {
 
    //la création du nouveau rectangle dependra de la nouvelle position du marqueur
    if ((p_marker1.position.lat() < p_marker2.position.lat()) && (p_marker1.position.lng() < p_marker2.position.lng())) {
        creerRectangle(p_marker2.position, p_marker1.position);
    }
    if ((p_marker1.position.lat() > p_marker2.position.lat()) && (p_marker1.position.lng() < p_marker2.position.lng())) {
        p_latlng_SW = new google.maps.LatLng(p_marker2.position.lat(), p_marker1.position.lng());
        p_latlng_NE = new google.maps.LatLng(p_marker1.position.lat(), p_marker2.position.lng());
        p_marker2.setPosition(p_latlng_NE);
        p_marker1.setPosition(p_latlng_SW);
        creerRectangle(p_marker2.position, p_marker1.position);
    }
    if ((p_marker1.position.lat() < p_marker2.position.lat()) && (p_marker1.position.lng() > p_marker2.position.lng())) {
        p_latlng_SW = new google.maps.LatLng(p_marker1.position.lat(), p_marker2.position.lng());
        p_latlng_NE = new google.maps.LatLng(p_marker2.position.lat(), p_marker1.position.lng());
        p_marker2.setPosition(p_latlng_NE);
        p_marker1.setPosition(p_latlng_SW);
        creerRectangle(p_marker2.position, p_marker1.position);
    }
    if ((p_marker1.position.lat() > p_marker2.position.lat()) && (p_marker1.position.lng() > p_marker2.position.lng())) {
        creerRectangle(p_marker1.position, p_marker2.position);
    }
}
 
// CREATION D'UN RECTANGLE AVEC LES 2 POINTS IMPORTANTS EN PARAMETRES
function creerRectangle(p_l_ne, p_l_sw) {
 
    if (rectangle == null) {
        LatLngBoundsduRectangle = new google.maps.LatLngBounds(p_l_sw, p_l_ne);
        rectangle = new google.maps.Rectangle();
 
        // Get the current bounds, which reflect the bounds before the zoom.
        var rectOptions = {
            strokeColor: "##2e2e2e ",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#949494",
            fillOpacity: 0.30,
            map: carte,
            bounds: LatLngBoundsduRectangle
        };
        rectangle.setOptions(rectOptions);
 
    }
    else {
        LatLngBoundsduRectangle = new google.maps.LatLngBounds(p_l_sw, p_l_ne);
        rectangle.setBounds(LatLngBoundsduRectangle);
    }
}

Bonjour,

Je me répons à moi même !!!!
En fait à force de chercher on trouve alors comme j'ai trouvé la solution je la post.
je réexplique l'application : le but est de tracer des rectangles et de pouvoir rechercher à l'interieur si des points déterminés à l'avance (issus de ma BDD) sont présent dans cette zone définie.

Je met donc en plus des méthodes de création des rectangles une méthode pour vérifier si le point est dans un des rectangles.

Le seul soucis que j'ai encore mais je l'ai accepté ! c'est que une fois que je créer un autre rectangle, le précédant est non modifiable.

N'hésitez pas si vous avez des questions.

A bientôt.

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
/* Déclaration des variables  */
var carte;
var tabMarqueurs2 = new Array();
var tabRect = new Array();
var p_latlng_SW;
var p_latlng_NE;
var distance;
var latlng;
var options;
 
var marker1
var marker2;
var boolInitRectangle;
var marker_rect_1a;
var marker_rect_2a;
 
var rectangle = null;
 
function initialiser() {
 
    //position de depart (Paris)
    latlng = new google.maps.LatLng(48.856614, 2.3522219000000177);
 
    //Option de l'affichage de depart
    options = {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    /* Chargement de la carte  */
    carte = new google.maps.Map(document.getElementById("carte"), options);
 
   //*******************************************************************//
    //Listener pour l'evenement du clic pour creer un RECTANGLE
    google.maps.event.addListener(carte, 'click', function(event) {
 
        if (rectangle != null) {
            marker_rect_1a.setMap(null);
            marker_rect_2a.setMap(null);
        }
 
        boolInitRectangle = false;
        marker_rect_1a = new google.maps.Marker({
            map: carte,
            position: event.latLng,
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            title: 'Deplacez ce marqueur pour redessiner le rectangle',
            draggable: true
        });
        marker_rect_2a = new google.maps.Marker({
            map: carte,
            position: carte.getCenter(),
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            title: 'Deplacez ce marqueur pour redessiner le rectangle',
            draggable: true
        });
 
        // Gestionnaire d'evenement qd on fini le deplacement du marqueur (du rectangle)
        google.maps.event.addListener(marker_rect_1a, 'dragend', function(event) {
            initRectangle(marker_rect_1a, marker_rect_2a);
        });
        //     Gestionnaire d'evenement qd on fini le deplacement du marqueur (du rectangle)
        google.maps.event.addListener(marker_rect_2a, 'dragend', function(event) {
            initRectangle(marker_rect_2a, marker_rect_1a);
        });
 
        rectangle = new google.maps.Rectangle();
        initRectangle(marker_rect_1a, marker_rect_2a);
        boolInitRectangle = true;
    });
    //*********************  FIN GESTIONNAIRE RECTANGLE  **********************************************//
}
 
 
//METHODE QUI VERIFIE SI UN POINT EST DANS LE ou LES RECTANGLE
function contient(point_a_Verif) {
    //  alert(tabRect.length);
    var boolResult;
    for (m = 0; m < tabRect.length; m++) {
        var lat_bounds = new google.maps.LatLngBounds(tabRect[m].getBounds().getSouthWest(), tabRect[m].getBounds().getNorthEast());
        //  alert(lat_bounds.toString());
        //  document.getElementById('bas_de_page').innerHTML += 'latBouds rectangle : ' + m + ' <br/>';
 
        if (lat_bounds.contains(point_a_Verif)) {
            //   alert('adr ok');
            boolResult = true;
            return boolResult;
        }
        else {
            // alert('adr ko');
            boolResult = false;
        }
    }
    return boolResult;
}
// Appelé lors de la MODIFICATION des points d'un rectangle
function initRectangle(p_marker1, p_marker2) {
 
    //la création du nouveau rectangle dependra de la nouvelle position du marqueur
    if ((p_marker1.position.lat() < p_marker2.position.lat()) && (p_marker1.position.lng() < p_marker2.position.lng())) {
        creerRectangle(p_marker2.position, p_marker1.position);
    }
    if ((p_marker1.position.lat() > p_marker2.position.lat()) && (p_marker1.position.lng() < p_marker2.position.lng())) {
        p_latlng_SW = new google.maps.LatLng(p_marker2.position.lat(), p_marker1.position.lng());
        p_latlng_NE = new google.maps.LatLng(p_marker1.position.lat(), p_marker2.position.lng());
        p_marker2.setPosition(p_latlng_NE);
        p_marker1.setPosition(p_latlng_SW);
        creerRectangle(p_marker2.position, p_marker1.position);
    }
    if ((p_marker1.position.lat() < p_marker2.position.lat()) && (p_marker1.position.lng() > p_marker2.position.lng())) {
        p_latlng_SW = new google.maps.LatLng(p_marker1.position.lat(), p_marker2.position.lng());
        p_latlng_NE = new google.maps.LatLng(p_marker2.position.lat(), p_marker1.position.lng());
        p_marker2.setPosition(p_latlng_NE);
        p_marker1.setPosition(p_latlng_SW);
        creerRectangle(p_marker2.position, p_marker1.position);
    }
    if ((p_marker1.position.lat() > p_marker2.position.lat()) && (p_marker1.position.lng() > p_marker2.position.lng())) {
        creerRectangle(p_marker1.position, p_marker2.position);
    }
}
 
// CREATION D'UN RECTANGLE AVEC LES 2 POINTS IMPORTANTS EN PARAMETRES
function creerRectangle(p_l_ne, p_l_sw) {
 
    if (boolInitRectangle == false) {
         //  tabRect.pop();
        var LatLngBoundsduRectangle = new google.maps.LatLngBounds(p_l_sw, p_l_ne);
        // Get the current bounds, which reflect the bounds before the zoom.
        var rectOptions = {
            strokeColor: "##2e2e2e ",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#949494",
            fillOpacity: 0.30,
            map: carte,
            bounds: LatLngBoundsduRectangle
        };
        rectangle.setOptions(rectOptions);
 
        tabRect.push(rectangle); // on stock le rectangle
    }
    if (boolInitRectangle) {
        tabRect.pop();
        var LatLngBoundsduRectangle = new google.maps.LatLngBounds(p_l_sw, p_l_ne);
        var rectOptions = {
            strokeColor: "##2e2e2e ",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#949494",
            fillOpacity: 0.30,
            map: carte,
            bounds: LatLngBoundsduRectangle
        };
        rectangle.setOptions(rectOptions)
        tabRect.push(rectangle); // on stock le rectangle
        alert('Taille de l''Array : ' + tabRect.length);
    }
 
}

22/07/2011, 14h13
NoSmoking

Bonjour,

Citation:

Le seul soucis que j'ai encore mais je l'ai accepté ! c'est que une fois que je créer un autre rectangle, le précédant est non modifiable.

ceci est inéluctable attendu que tu utilises des variables globales que tu réaffectes à chaque nouvelle création, tu perds donc la traçabilité des éléments précédent.

Il te faut également créer des liaisons Rectangle <-> Markers et MarkerNE <-> MakerSW pour pouvoir travailler sur les mêmes objets.