允许用户在谷歌地图上绘制矩形

Question

我正在尝试让用户通过单击按钮在Google地图上绘制矩形，然后将该矩形添加到地图上，以便用户可以调整大小/拖动。据我所知，Google的API不允许我们让用户单击并拖动鼠标光标跨越地图来绘制矩形，因此我认为我们必须使用初始/起始边界？当我单击负责绘制矩形的事件处理程序时，我遇到了错误（请参见我的JSFiddle 这里）。

rectangle.setMap(map);
google.maps.event.addListener(map, 'click', function() {
    addRecPath();
});

我一直在尝试创建如何让用户根据Google提供的教程（折线）和（可编辑形状）绘制矩形。

我错在哪里了？似乎问题出在事件处理程序上。这个矩形可以（或应该）被推入一个数组中吗？

- kaoscify

Answer 1

缺少的内容：

1. 需要初始化Google绘图Maps API库。
2. 需要初始化绘图管理器对象以绘制形状。

请参考教程。

不需要使用初始边界来在Google地图上绘制形状。Google提供了Google绘图API，允许用户绘制形状。您可以使用任何形状（多边形、折线、圆、矩形）。

请查看以下演示。

JS

var map;
var drawingManager = new google.maps.drawing.DrawingManager();

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(44.5452, -78.5389),
        zoom: 9
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}

function drawRec() {
        //Setting options for the Drawing Tool. In our case, enabling Polygon shape.
        drawingManager.setOptions({
            drawingMode : google.maps.drawing.OverlayType.RECTANGLE,
            drawingControl : true,
            drawingControlOptions : {
                position : google.maps.ControlPosition.TOP_CENTER,
                drawingModes : [ google.maps.drawing.OverlayType.RECTANGLE ]
            },
            rectangleOptions : {
                strokeColor : '#6c6c6c',
                strokeWeight : 3.5,
                fillColor : '#926239',
                fillOpacity : 0.6,
                editable: true,
                draggable: true
            }   
        });
        // Loading the drawing Tool in the Map.
        drawingManager.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

HTML

：超文本标记语言。

<button onclick="drawRec();">Draw Rectangle</button>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>

- ArunRaj

---

谢谢ArunRaj。我必须使用绘图管理器吗？我不能只是使用new google.maps.Rectangle吗？顺便说一下，演示链接实际上链接到我的帖子中的JSFiddle。 - kaoscify

@kolor：非常抱歉，在演示中我试图更新您的代码。现在请再次检查它。要绘制形状，您必须使用绘图管理器。要控制绘制形状上的事件，可以使用矩形（例如：为每个矩形形状命名）。实际上，没有矩形对象是无法完成的。作为启动，我给您提供了一个示例。 - ArunRaj

好的，我现在可以看到演示了。谢谢你的帮助。我仍然想知道使用绘图管理器的优点。我从来没有想过这样做。在过去，我尝试过使用 new google.maps.Polygon、new google.maps.Circle、new google.maps.Rectangle 等等。使用绘图管理器仍然可以捕获所绘制特征的坐标吗？ - kaoscify

@kolor：是的，你可以为你的空间应用需求做任何事情。最好提出另一个问题，我会简要解答。这也会帮助很多人。 - ArunRaj

好主意。我想看看关于它的讨论。我的问题在这里：http://stackoverflow.com/questions/23026537/google-maps-drawing-library-vs-standard-drawing-techniques - kaoscify