Question

在我的基于Google地图的应用程序中，用户通常需要在地图上绘制一对同心圆。我正在使用google.maps.drawing.DrawingManager。在理想情况下，用户正常绘制第一个圆，然后绘制第二个圆的过程自动，其中心已经设置。因此，用户只需要一次额外的点击即可绘制第二个圆圈。

这是我尝试的内容：

var manager = new google.maps.drawing.DrawingManager({
    map: myMap,
    drawingControlOptions: {
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
    }
});

var phaseOne = true;

google.maps.event.addListener(manager, 'circlecomplete', function (circle) {
    if (phaseOne) {
        phaseOne = false;
        // already in drawing mode, so... just trigger a click event?
        google.maps.event.trigger(myMap, 'click', {
            stop: null,
            latLng: circle.getCenter()
        });
    } else {
        phaseOne = true;
    }
}

但它不起作用。绘制单个圆圈仍然可以正常工作，phaseOne标志正在正确交替。但事件触发似乎没有做任何事情。

有任何想法或建议吗？

Answer 1

我终于搞定了！就像TravJenkins所说的那样，所有事件在绘图模式下都被禁用，我尝试使用Google API但却无法找到方法。我认真地认为绘图库可以大大改进。

我决定模仿点击事件，保存上一次点击的坐标。

我所要做的就是在圆形绘制时影响两个变量进行检测，另一个在第二个时停止以防止无限绘制。

以下是代码：

var draw = false
var already = false
var event

$('#map').click(function (e) {
  if (draw === true && already === false) {
    already = true;
    click(event.clientX, event.clientY);
    draw = false;
  } else if (draw === false) {
    event = e;
    already = false;
  }
  draw = false
})

function click (x, y) {
  var ev = document.createEvent('MouseEvent')
  var el = document.elementFromPoint(x, y)
  ev.initMouseEvent(
    'click', true, true, window, null, 0, 0,
    x, y,
    false, false, false, false, 0, null
  )
  el.dispatchEvent(ev)
}

google.maps.event.addDomListener(manager, 'circlecomplete', function (circle) {
  draw = true
})

Answer 2

希望google.maps团队会添加一些方法，允许开发人员从代码中提取一些叠加层，或者至少将新的叠加层附加到DrawingManager，但目前情况并非如此。

我建议您使用我在以下示例中说明的不同方法：

<!DOCTYPE html>

<html>
<head>    
    <title>Handling markers collection demo</title>

   <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-container
        {
            height: 100%;
            width: 100%;
            min-width:500px;
            min-height:300px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>    

</head>


<body>
    <div id="map-container"></div>
    <script type="text/javascript">

        var _map,
            manager;

        $(document).ready(function () {
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            _map = new google.maps.Map($("#map-container")[0], mapOptions);

            manager = new google.maps.drawing.DrawingManager({
                map: _map,
                drawingControlOptions: {
                    drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
                }
            });

            google.maps.event.addListener(manager, 'circlecomplete', function (circle) {

                var center = circle.getCenter(), radius = circle.getRadius();

                manager.setDrawingMode(null);
                var circleOptions = {
                        center: center,
                        editable: true,
                        map: _map,
                        radius: radius * 0.80,
                        visible: true
                    },
                    newCircle = new google.maps.Circle(circleOptions);

                google.maps.event.addListener(newCircle, 'center_changed', function () {
                    var oldCenter = center,
                        newCenter = newCircle.getCenter();

                    if (oldCenter.lat() != newCenter.lat() && oldCenter.lng() != newCenter.lng()) {
                        newCircle.setCenter(center);
                    }
                });

                google.maps.event.addListener(newCircle, 'radius_changed', function () {
                    newCircle.setEditable(false);
                });

            });
        });
    </script>
</body>
</html>

此代码可用并在此jsFiddle

中运行

如何触发Google Maps'LargeManager'绘图的* start *？

2 个答案: