Discussion :

[cisqo]

Bonjour à tous,

j'utilise l'api google map pour proposer à mes utilisateurs de sélectionner une zone géographique avec le code suivant:

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
 
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: 48.44389571, lng: 1.489013282},
          zoom: 7
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        var circle = new google.maps.Circle({
            map: map,
            center: new google.maps.LatLng(48.44389571, 1.489013282),
            radius: 50000,
            strokeColor:"#00ff00",
            fillColor:"red",
            editable: true,
            });
        google.maps.event.addListener (circle, "radius_changed", function(){
            document.getElementById("info").innerHTML = circle.getRadius();
        });
        google.maps.event.addListener (circle, "center_changed", function(){
            document.getElementById("info").innerHTML = circle.getCenter();
        });
 
 
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Cela crée un cercle éditable sur google map. J'aimerai y ajouter cependant une fonctionnalité bien utile:
Limiter la taille minimale (et maximale si possible) de ce cercle.
J'aimerai que sur l'interface le cercle ne puisse pas être inférieur à un certain rayon.
Cela vous semble possible?
Si oui comment?
Merci de votre aide précieuse.
Cordialement,

CyriL

[NoSmoking]

Bonjour,
il te suffit d'observer l'événement radius_changed du cercle.

Code :

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

1
2
3
4
5
6
7
8
var MIN_RAYON = 1000; // 1km
 
google.maps.event.addListener( oCercle, 'radius_changed', function() {
    var rayon = this.getRadius();
    if( rayon < MIN_RAYON){
      this.setRadius( MIN_RAYON);
    }
});

idem pour un maximum.

[cisqo]

Merci mille fois Nosmoking pour ta réponse.
Je trouve que ta solution fonctionne et c'est deja trés bien.
A la base j'aurai voulu que le rayon se bloque lorsqu'on l'edite, pour que l'utilisateur visualise le minimum et le maximum.
En cliquant et agrandissant, j'aurai aimé que le cercle se bloque au maxima. Je ne sais pas si je suis trés claire.
Dans ce cas présent, le cercle revient à la taille minimale ou maximale une fois que l'utilisateur à lacher la souris.
Qu'en penses tu?
Cela est il impossible?

[NoSmoking]

Cette méthode est la plus simple à mettre en oeuvre mais il va de soit qu'elle a quelques soucis et celui notamment de ne pas avoir accès aux événements sur le déplacement des "poignées".

Si tu veux faire du custom tu peux toujours avoir recours aux MVCObjet de l'API.

Une approche de ce que tu souhaites existe dans les articles, Fun with MVC Objects, qui est à la base de tout ce que tu pourras trouver si tu fais une recherche avec comme mot clé distance widget google maps.

- Celui qui ma paru le plus complet https://code.google.com/p/gmaps-samp...tancewidget.js
- Celui qui me parait te convenir http://www.etechpulse.com/2014/03/go...ve-circle.html