web-dev-qa-db-fra.com

Dessiner un polygone à l'aide de la souris sur Google Maps

Je dois dessiner un polygone à l'aide de la souris et marquer une zone particulière sur Google Maps. Le but 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 la carte Google tout en les créant afin que la base de données ait leur latitude et leur longitude. 

Comment puis-je dessiner le polygone et le remplir d'une couleur d'arrière-plan pour marquer la zone dans Google Maps? J'ai lu le Manuel de l'API “Comment dessiner des polygones?” En gros, vous devez marquer plusieurs points, puis les combiner en un polygone. Mais j'aurai besoin de le faire en faisant glisser la souris, tout comme pour dessiner une forme. Aidez-moi à atteindre cet objectif.

javascriptgoogle-maps
35
Kunal

vous pouvez utiliser les outils d'édition de polygones Google MyMaps dans votre application, peut-être que cela vous convient?

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

Cependant, si vous voulez implémenter ceci vous-même, c'est essentiellement ceci:

ajouter un écouteur de clic à la carte.

répéter: stocke les points sur lesquels l'utilisateur clique dans un tableau et ajoute un marqueur à ce stade . si c'est le premier marqueur, ajoutez un écouteur de clic

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

Je n'ai pas de code à vous montrer, mais j'ai implémenté cela moi-même dans une entreprise précédente, donc c'est faisable :)

16
Richard

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

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

Il n'est pas documenté, mais j'espère 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);
    });
});
26
Drew Noakes

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

Vous devez simplement activer les outils de dessin (comme indiqué dans l'exemple de la documentation) et ajouter des écouteurs d'événement pour la création de types de superposition (comme indiqué dans la section "Evénements de dessin").

Voici un exemple rapide d'utilisation: http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

20
Michael Hellein

Vous souhaiterez peut-être consulter les commandes géométrie de la bibliothèque d'utilitaires GMaps .

Pour plus de référence, vous pouvez consulter la référence GeometryControls Reference .

9
Daniel Vassallo

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

3
Steve Midgley

j'ai fait un exemple pour moi-même. le code est ci-dessous et jsfiddle est également disponible

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap" async defer></script>

<script>

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
  lat: -34.397,
  lng: 150.644
},
zoom: 8
});

var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
drawingControlOptions: {
  position: google.maps.ControlPosition.TOP_CENTER,
  drawingModes: ['polygon', 'circle']
},
polygonOptions: {
  editable: true
}

});
drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'overlaycomplete', 
function(event) {
event.overlay.set('editable', false);
drawingManager.setMap(null);
console.log(event.overlay);
});

}
</script>

https://jsfiddle.net/zgmdvsrz/

vous pouvez définir drawingcontrol sur true si vous souhaitez afficher le gestionnaire de dessins

2
Okan SARICA

J'ai utilisé le code suivant pour dessiner un polygone sur une carte

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools</title>

<script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
  #map, html, body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  #panel {
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    float: right;
    margin: 10px;
  }
  #color-palette {
    clear: both;
  }
  .color-button {
    width: 14px;
    height: 14px;
    font-size: 0;
    margin: 2px;
    float: left;
    cursor: pointer;
  }
  #delete-button {
    margin-top: 5px;
  }
  #map_canvas {
   height: 100%;
   width: 100%;
   margin: 0px;
   padding: 0px
 }

</style>
<script type="text/javascript">
 var geocoder;
 var map;
 var all_overlays = [];

 function initialize() {
     var map = new google.maps.Map(
     document.getElementById("map_canvas"), {
     center: new google.maps.LatLng(37.4419, -122.1419),
     zoom: 13,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });

var polyOptions = {
     strokeWeight: 0,
     fillOpacity: 0.45,
     editable: true,
     fillColor: '#FF1493'
   };
var selectedShape;

 var drawingManager = new google.maps.drawing.DrawingManager({
           drawingMode: google.maps.drawing.OverlayType.POLYGON,
           drawingControl: false,
           markerOptions: {
           draggable: true
       },
    polygonOptions: polyOptions
     });

  $('#enablePolygon').click(function() {
         drawingManager.setMap(map);
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });

   $('#resetPolygon').click(function() {
        if (selectedShape) {
             selectedShape.setMap(null);
           }
        drawingManager.setMap(null);
        $('#showonPolygon').hide();
        $('#resetPolygon').hide();
    });

    google.maps.event.addListener(drawingManager, 'polygoncomplete', 

   function(polygon) {
         //  var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath());
        //  $('#areaPolygon').html(area.toFixed(2)+' Sq meters');
      $('#resetPolygon').show();
    });

  function clearSelection() {
      if (selectedShape) {
            selectedShape.setEditable(false);
            selectedShape = null;
         }
    }


   function setSelection(shape) {
          clearSelection();
          selectedShape = shape;
          shape.setEditable(true);
    }

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.Push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
  // Switch back to non-drawing mode after drawing a shape.
  drawingManager.setDrawingMode(null);

  // Add an event listener that selects the newly-drawn shape when the user
  // mouses down on it.
  var newShape = e.overlay;
  newShape.type = e.type;
  google.maps.event.addListener(newShape, 'click', function() {
    setSelection(newShape);
  });
  setSelection(newShape);
   }
 });

 google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var coordinates = (polygon.getPath().getArray());
console.log(coordinates);
alert(coordinates);
 });
}
 google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
   <body>
    <input type="button" id="enablePolygon" value="Calculate Area" />
    <input type="button" id="resetPolygon" value="Reset" style="display: none;" />
   <div id="showonPolygon" style="display:none;"><b>Area:</b> <span 
     id="areaPolygon">&nbsp;</span></div>
     <div id="map_canvas"></div>
     </html>

Sortie:  enter image description here

1
Kishor N R

Il existe un portage des outils de dessin API v2 vers API v3 @ http://nettique.free.fr/gmap/toolbar.html

1
Dennis

Google.maps.polygon a connu des améliorations significatives depuis que cette question a été posée pour la première fois. Voici une implémentation simple, utilisant tous les outils natifs de Google.maps v3. (Remarque: il y a un travail en JavaScript génial qui fonctionne ici ... mais ça marche ...)

var listener1 = google.maps.event.addListener(map, "click", function(e) {
    var latLng = e.latLng;
    var myMvcArray = new google.maps.MVCArray();
    myMvcArray.Push(latLng); // First Point
    var myPolygon = new google.maps.Polygon({
        map: map,
        paths: myMvcArray, // one time registration reqd only
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.10,
        editable: true,
        draggable: false,
        clickable: true
    });
    google.maps.event.removeListener(listener1);

    var listener2 = google.maps.event.addListener(map, 'click', function(e) {
        latLng = e.latLng;
        myMvcArray.Push(latLng);
        myMvcArray.getArray().forEach(function(value, index) {
            console.log(" index: " + index + "    value: " + value);
        })
    });
});

Répondez avec le nouveau code soumis sur l'ancienne question au cas où quelqu'un d'autre arriverait ici!

0
zipzit