google-maps - 允许用户在 Google map 上绘制矩形

Question

我试图让用户通过单击按钮在 Google map 上绘制一个矩形，然后将矩形添加到 map 中，然后他们可以调整大小/拖动。据我所知，Google 的 API 不允许我们让用户在 map 上单击并拖动鼠标光标来绘制矩形，所以我认为我们必须使用初始/起始边界？

当我单击负责绘制矩形的事件处理程序时，出现错误(请参阅我的 JSFiddle here ):

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

我一直在尝试根据Google here (polylines)提供的教程创建如何让用户绘制矩形和 here (user-editable shapes) .

我哪里出错了？看来问题出在事件处理程序上。可以(或应该)将此矩形插入数组内吗？

Answer 1

你缺少的东西

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

关注the tutorial供您引用。

NO. You dont have to use initial/starting bounds to draw a shape in google maps. Google provides Google drawing API to allow users to draw a shapes. You can use any shapes.(Polygon, Polyline, circle, rectangle)

请查看以下demo .

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>