Google地图绘制 - 通过拖动绘制线条或多边形

Question

目前,您可以通过单击来创建节点,从而在地图上绘制多边形或折线.但是,如果您想要遵循河流或海岸线等功能,这可能既繁琐又无懈可击.

有没有人知道可以通过单击拖动鼠标,或单击开始,然后拖动路径,然后单击停止来绘制路径的方法？

我看过DrawingManager和MouseEvent,但我还没有看到任何有希望的东西.

有没有办法根据click和mouseMove等事件连接绘图？

这将允许更准确和快速的功能.

Answer 1

工作流程:

1. onmousedown在地图上设置draggable地图的选项false,创建一个Polyline-Instance并设置to 的clickable-optionPolylinefalse

2. 观察mousemove地图的-event,每次发生时都会将返回LatLng的路径推回去Polyline

3. onmouseup删除mousemove地图的-listener并将地图的draggable-option 设置回true.你Polyline已经完成了

4. 当你不想创建一个Polygon,现在创建一个Polygon-instance时,设置路径Polygon到的路径Polyline并删除Polyline

<edit>:建议只使用按下的鼠标按钮进行绘制,否则地图永远不会被拖动.

演示:http://jsfiddle.net/doktormolle/YsQdh/

代码片段:(来自链接的jsfiddle)

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
  google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
    //do it with the right mouse-button only
    if (e.button != 2) return;
    //the polygon
    poly = new google.maps.Polyline({
      map: map,
      clickable: false
    });
    //move-listener
    var move = google.maps.event.addListener(map, 'mousemove', function(e) {
      poly.getPath().push(e.latLng);
    });
    //mouseup-listener
    google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
      google.maps.event.removeListener(move);
      if (document.getElementById('overlay').value == 'Polygon') {
        var path = poly.getPath();
        poly.setMap(null);
        poly = new google.maps.Polygon({
          map: map,
          path: path
        });
      }
    });

  });
}

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

html,
body {
  height: 100%;
  margin: 0
}
#map_canvas {
  height: 90%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
Use the right mouse-button to draw an overlay
<br/>
<select id="overlay">
  <option value="Polyline">Polyline</option>
  <option value="Polygon">Polygon</option>
</select>
<div id="map_canvas"></div>