Dessiner un polygone à l'aide de 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. 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 comme 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.

Answer 1

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

Toutefois, si vous souhaitez implémenter vous-même, il est essentiellement ceci:

ajouter Cliquer auditeur carte.

Répéter: stocker les points sur lesquels l'utilisateur clique dans un tableau et ajouter un marqueur à ce stade. si elle est le premier marqueur ajouter un clic écoute pas

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

Je n'ai pas de code pour vous montrer, mais je J'ai mis en œuvre moi-même dans une société précédente, de sorte qu'il peut être fait :)

Answer 2

Vous pouvez vérifier le Geometry Controls du GMaps Utility Library. Pour plus d'informations, vous pouvez passer par GeometryControls Reference.

Answer 3

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

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

C'est non 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); 
    }); 
}); 

Answer 4

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

Vous avez juste besoin pour activer les outils de dessin (comme le montre l'exemple dans la documentation) et ajouter des écouteurs d'événements pour la création de superposition types (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 5

Il y a un port des outils de dessin API v2 à API v3 @http://nettique.free.fr/gmap/toolbar.html

Answer 6

La nouvelle carte Engines Lite est exactement l'outil que vous êtes à la recherche pour je pense: https://mapsengine.google.com/map/

Answer 7

Il y a eu des améliorations significatives dans google.maps.polygon depuis que cette question a été posée pour la première fois. Voici une implémentation simple, utilisant tous les outils google.maps v3 natifs. (Note: il y a un travail de champ bancal JavaScript ici ... mais il fonctionne ...)

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éponse avec un nouveau code soumis sur l'ancienne question au cas où quelqu'un d'autre obtient ici!

Answer 8

J'ai fait un exemple pour moi-même. le code est ci-dessous et également jsFiddle est avaible

<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 true si vous voulez montrer gestionnaire dessin

Answer 9

J'ai utilisé le code ci-dessous 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: