在谷歌地图上使用鼠标绘制多边形

Question

我需要使用鼠标绘制多边形并在Google地图上标记特定区域.目的是在Google地图上标记一个区域,然后显示该区域的酒店和景点.用户将在创建它们时在Google地图上标记酒店,以便数据库具有纬度和经度.

如何绘制多边形并用颜色填充背景以在Google地图中标记区域？我已经阅读了API手册"如何绘制多边形？"基本上你需要标记多个点,然后将它们组合成一个多边形.但我需要使用鼠标拖动来完成此操作,就像绘制一个形状一样.请帮助我如何实现这一目标.

Answer 1

以下是一些可以实现您想要的代码(适用于Google Maps JavaScript API第3版).它支持:

• 单击以附加顶点.
• 再次单击第一个顶点以关闭路径.
• 拖动顶点.

它没有文档,但希望你能够轻松地看到它正在做什么.

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

Google Maps JavaScript API v3提供了一个绘图库,http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

您只需启用绘图工具(如文档中的示例所示)并添加事件侦听器以创建叠加类型(如"绘图事件"部分所示).

它的一个简单示例如下:http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

Answer 3

您可以在appplication中使用Google MyMaps多边形编辑工具,也许这对您有用吗？

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

但是,如果你想自己实现它,基本上是这样的:

添加单击侦听器以映射.

repeat:存储用户在数组中单击的点,并在此处添加标记.如果它是第一个标记添加点击监听器

当用户单击第一个标记时,解析使用点数组来构建多边形

我没有任何代码可以向您展示,但我已经在以前的公司中实现了这一点,所以可以做到:)

Answer 4

您可能要检查出的几何控制的的GMaps实用工具库.

有关进一步参考,您可能需要浏览GeometryControls Reference.

Answer 5

我为自己做了一个例子。代码在下面，也可以使用 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/

如果要显示绘图管理器，可以将drawingcontrol 设置为true