Question

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

当我点击负责绘制矩形的事件处理程序时，我收到一个错误（请参阅我的JSFiddle here）：

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

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

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

Answer 1

你缺少的东西

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

关注the tutorial以供参考。

NO。您不必使用初始/起始边界在谷歌地图中绘制形状。 Google提供Google绘图API以允许用户绘制形状。您可以使用任何形状。（多边形，折线，圆形，矩形）

请仔细阅读以下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>

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

1 个答案: