javascript tuto Dessiner un polygone à l'aide de la souris sur google maps




plusieurs marker google map v3 (8)

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

J'ai besoin de dessiner un polygone en utilisant la souris et marquer une zone particulière sur Google Maps. Le but est de marquer une zone sur Google Maps, puis de montrer les hôtels et les attractions sur cette zone. L'utilisateur va marquer les hôtels sur Google map en les créant afin que le db ait sa latitude et ses longitudes.

Comment puis-je dessiner le polygone et le remplir avec une couleur en 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 je vais devoir faire cela en utilisant la souris, tout comme dessiner une forme. S'il vous plaît aidez-moi sur la façon d'atteindre cet objectif.


J'ai fait un exemple pour moi-même. le code est ci-dessous et aussi jsfiddle est 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 voulez afficher le gestionnaire de dessin


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:



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 avez juste besoin d'activer les outils de dessin (comme indiqué dans l'exemple dans les docs) et d'ajouter des écouteurs d'événements pour la création de types de superposition (comme indiqué dans la section "Evénements de dessin").

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



Voici du code (pour l'API JavaScript de Google Maps version 3) qui réalise ce que vous voulez. Elle supporte:

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

Ce n'est pas documenté, mais j'espère que vous pouvez 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);
    });
});

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 vous implémenter vous-même, c'est essentiellement ceci:

ajouter un écouteur de clic pour mapper.

répétez: stockez les points sur lesquels l'utilisateur clique dans un tableau et ajoutez un marqueur à ce stade. si c'est le premier marqueur, cliquez dessus pour l'écouter

Lorsque l'utilisateur clique sur le premier marqueur, analyser le tableau de points pour construire votre polygone

Je n'ai pas de code à vous montrer, mais je l'ai implémenté moi-même dans une entreprise précédente, donc ça peut être fait :)





google-maps