Dessiner un polygone avec la souris sur google maps

Question

Je dois dessiner un polygone à l'aide de la souris et marquer une zone particulière sur Google Maps. L'objectif est de marquer une zone sur Google Maps, puis d'afficher les hôtels et les attractions de cette zone. L'utilisateur marquera les hôtels sur Google Maps lorsqu'il les créera afin que la base de données contienne leur latitude et leur longitude.

Comment puis-je dessiner un polygone et le remplir avec une couleur de fond pour marquer la zone dans Google Maps ? J'ai lu le manuel de l'API "Comment dessiner des polygones ?". En gros, il faut marquer plusieurs points et les combiner en un polygone. Mais je dois le faire en faisant glisser la souris, comme pour dessiner une forme. Je vous prie de m'aider à réaliser cette opération.

Answer 1

Voici un code (pour l'API JavaScript de Google Maps version 3) qui permet d'obtenir ce que vous souhaitez. Il prend en charge :

• en cliquant pour ajouter des sommets.
• Cliquez à nouveau sur le premier sommet pour fermer le chemin.
• en faisant glisser les sommets.

Il n'est pas documenté, mais nous espérons que vous pourrez voir ce qu'il fait assez facilement.

$(document).ready(function () {
    var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true });
    var isClosed = false;
    var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 });
    google.maps.event.addListener(map, 'click', function (clickEvent) {
        if (isClosed)
            return;
        var markerIndex = poly.getPath().length;
        var isFirstMarker = markerIndex === 0;
        var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true });
        if (isFirstMarker) {
            google.maps.event.addListener(marker, 'click', function () {
                if (isClosed)
                    return;
                var path = poly.getPath();
                poly.setMap(null);
                poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });
                isClosed = true;
            });
        }
        google.maps.event.addListener(marker, 'drag', function (dragEvent) {
            poly.getPath().setAt(markerIndex, dragEvent.latLng);
        });
        poly.getPath().push(clickEvent.latLng);
    });
});

Answer 2

L'API JavaScript v3 de Google Maps fournit une bibliothèque de dessins, http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

Il suffit d'activer les outils de dessin (comme indiqué dans l'exemple de la documentation) et d'ajouter des récepteurs d'événements pour la création de types de superposition (comme indiqué dans la section "Événements de dessin").

Un exemple rapide de son utilisation serait : http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

Answer 3

Vous pouvez utiliser les outils d'édition de polygones de Google MyMaps dans votre application, peut-être cela vous conviendra-t-il ?

voir http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-and-shape.html

Cependant, si vous voulez le faire vous-même, voici comment procéder :

ajouter un écouteur de clic à la carte.

répéter : stocker les points sur lesquels l'utilisateur clique dans un tableau, et ajouter un marqueur à ce point. S'il s'agit du premier marqueur, ajoutez-y un écouteur de clic.

lorsque l'utilisateur clique sur le premier marqueur, l'analyse syntaxique utilise le tableau de points pour construire votre polygone.

Je n'ai pas de code à vous montrer, mais je l'ai moi-même mis en œuvre dans une entreprise précédente, donc c'est possible :)

Answer 4

Vous pouvez consulter le Contrôles de la géométrie de la Bibliothèque utilitaire GMaps .

Pour plus d'informations, vous pouvez consulter le document suivant Référence de GeometryControls .

Answer 5

Le nouveau Map Engines Lite est exactement l'outil que vous recherchez, je pense : https://mapsengine.google.com/map/