在Google地图上使用鼠标绘制多边形
我需要使用鼠标绘制多边形，并在Google地图上标记特定区域。 目的是在Google地图上标记一个区域，然后显示该地区的酒店和景点。 用户将在Google地图上标记酒店，同时创build它们，以便分贝具有经度和纬度。
如何绘制多边形并使用颜色填充颜色作为背景以在Google地图中标记区域？ 我已阅读API手册“如何绘制多边形？”基本上你需要标记多个点，然后将它们组合成一个多边形。 但是我需要使用鼠标拖动来完成这一点，就像绘制一个形状一样。 请帮助我如何实现这一目标。
您可以在您的应用程序中使用Google MyMaps多边形编辑工具，也许这对您会好吗？
请参阅http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-and-shape.html
但是，如果你想自己实现这个基本上是这样的：
添加点击侦听器来映射。
重复：用户在数组中点击的存储点，并在此点添加一个标记。 如果它是第一个标记添加点击监听器
当用户点击第一个标记时，parsing使用点数组来build立你的多边形
我没有任何代码可以展示给你，但是我已经在之前的公司中实现了这个function，所以可以这样做:)
以下是一些代码（适用于Google Maps JavaScript API版本3），可以实现您想要的function。 它支持：
- 点击以追加顶点。
- 再次点击第一个顶点closurespath。
- 拖动顶点。
这是无证的，但希望你可以看到它很容易做什么。
$(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); }); }); Google Maps JavaScript API v3提供了绘图库， http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools
您只需启用绘图工具（如文档中的示例所示），并添加事件侦听器以创build叠加types（如“绘图事件”部分所示）。
它的一个简单的例子是： http : //gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html
您可能想要查看GMaps公用程序库的几何控件 。
有关进一步参考，您可能想要通过GeometryControls参考 。
新的Map Engines Lite就是您想要的工具，我认为： https : //mapsengine.google.com/map/
API v3中有一个API v2绘图工具的端口@ http://nettique.free.fr/gmap/toolbar.html
google.maps.polygon有一些重大的改进，因为这个问题是第一次被问到。 这是一个简单的实现，使用所有本地google.maps v3工具。 （注意：这里有一个不可思议的JavaScript范围，但它确实有效…）
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); }) }); });
如果有其他人来到这里，就可以用旧的问题提交新的代码！
我为自己做了一个例子。 代码是下面，也是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/
如果要显示graphicspipe理器，则可以将drawingcontrol设置为true
