如何与绘图进行协调?

时间:2017-09-11 10:00:15

标签: javascript jquery google-maps

我在代码中没有使用监听器然后如何从绘图中获取每个坐标点?

     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.MARKER,
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: ['polygon', 'polyline']
        },

        circleOptions: {
          fillColor: '#ffff00',
          fillOpacity: 1,
          strokeWeight: 5,
          clickable: false,
          editable: true,
          zIndex: 1
        }
      });
      drawingManager.setMap(map);
}

小提琴:https://jsfiddle.net/31aey9mk/

1 个答案:

答案 0 :(得分:2)

我已更新你的小提琴here

基本上,您需要传递一个您希望使用的google.map.drawing.OverlayType数组。在这种情况下,我添加了一个标记和多边形。

然后,您需要在initMap()方法中添加一个事件处理程序,以便在绘图完成时进行捕获:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event)
{
    if (event.type === 'marker') console.log('Lat: ' + event.overlay.position.lat() + ', Long: ' + event.overlay.position.lng())
    else console.log(event.overlay.getPath().b);
});

抓取事件和绘制的形状/标记。