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.
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 :)
Voici un code (pour l'API JavaScript de Google Maps version 3) qui permet d'obtenir ce que vous souhaitez. Elle supporte:
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);
});
});
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
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 .
La nouvelle Map Engines Lite est exactement l'outil que vous recherchez, je pense: https://mapsengine.google.com/map/
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
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"> </span></div>
<div id="map_canvas"></div>
</html>
Il existe un portage des outils de dessin API v2 vers API v3 @ http://nettique.free.fr/gmap/toolbar.html
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!