javascript - gratis - google maps documentation

Dibuja un polígono usando el mouse en los mapas de Google

Question

Necesito dibujar un polígono usando el mouse y marcar un área particular en Google Maps. El objetivo es marcar un área en Google Maps y luego mostrar hoteles y atracciones en esa área. El usuario marcará los hoteles en el mapa de Google al crearlos para que el db tenga su latitud y longitud.

¿Cómo puedo dibujar el polígono y rellenarlo con un color como fondo para marcar el área en Google Maps? He leído el Manual de la API "cómo dibujar polígonos", básicamente, necesitaría marcar varios puntos y luego combinarlos en un polígono. Pero tendré que hacer esto usando la función de arrastrar del mouse, como dibujar una forma. Amablemente ayúdame a cómo lograr esto.

Answer 1

Aquí hay un código (para la API de JavaScript de Google Maps versión 3) que logra lo que desea. Es compatible con:

• haciendo clic para agregar vértices.
• haciendo clic en el primer vértice nuevamente para cerrar la ruta.
• arrastrando vértices.

No está documentado, pero es de esperar que pueda ver lo que está haciendo con la suficiente facilidad.

$(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

El JavaScript API v3 de Google Maps proporciona una biblioteca de dibujo, http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

Solo tiene que habilitar las herramientas de dibujo (como se muestra en el ejemplo en los documentos) y agregar detectores de eventos para la creación de tipos de superposición (como se muestra en la sección "Eventos de dibujo").

Un ejemplo rápido de su uso sería: http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

Answer 3

El nuevo Map Engines Lite es exactamente la herramienta que está buscando, creo: https://mapsengine.google.com/map/

Answer 4

Es posible que desee consultar los Controles de Geometría de la Biblioteca de Utilidades de GMaps .

Para obtener más referencias, puede consultar la Referencia de GeometryControls .

Answer 5

Ha habido algunas mejoras significativas en google.maps.polygon desde que se hizo esta pregunta por primera vez. Aquí hay una implementación simple, que usa todas las herramientas nativas de google.maps v3. (Nota: hay un alcance de JavaScript wonky por aquí ... pero funciona ...)

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

¡Responda con un nuevo código enviado a una pregunta anterior en caso de que alguien más llegue aquí!

Answer 6

Hay un puerto de herramientas de dibujo API v2 para API v3 @ http://nettique.free.fr/gmap/toolbar.html

Answer 7

He usado el siguiente código para dibujar un polígono en un mapa

<!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>

Salida:

Answer 8

Hice un ejemplo para mí. el código está debajo y también está disponible jsfiddle

<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/

puede establecer drawingcontrol en true si desea mostrar el administrador de dibujos

Answer 9

puede usar las herramientas de edición de polígonos de Google MyMaps en su aplicación, ¿quizás esto estará bien para usted?

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

Sin embargo, si quiere implementarlo usted mismo, es básicamente esto:

agregar clic oyente al mapa.

repetir: almacene puntos en los que el usuario hace clic en una matriz y agregue un marcador en este punto. si es el primer marcador, agregue clic oyente a él

cuando el usuario hace clic en el primer marcador, analiza la matriz de puntos para construir tu polígono

No tengo ningún código para mostrarle, pero lo he implementado en una empresa anterior, por lo que se puede hacer :)