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 javascript : 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
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);
    }
}