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

Question

目前，您可以通过单击在地图上绘制多边形或折线，这会创建节点。然而，如果您想跟随一个特定的功能，例如河流或海岸线，这可能既繁琐又不准确。

有人知道是否有一种方法可以通过单击拖动鼠标来绘制路径，或者通过单击开始，然后拖动路径，再次单击停止来绘制路径吗？

我已经查看了DrawingManager和MouseEvent，但是我还没有找到任何有希望的内容。

是否有一种方法可以根据诸如click和mouseMove之类的事件来连接绘图？

这将允许更准确和快速的功能实现。

- Skitterm

---

可能是在Google地图上进行自由绘制的重复问题。 - geocodezip

Answer 1

可能的工作流程：

1. onmousedown 在地图上设置draggable选项为false，创建一个Polyline实例，并将Polyline的clickable选项设置为false
2. 观察地图的mousemove事件，每次事件发生时将返回的LatLng推入Polyline的路径
3. onmouseup 删除地图的mousemove监听器，并将地图的draggable选项设置回true。您的Polyline已完成
4. 当您想要创建一个Polygon时，现在创建一个Polygon实例，将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>

- Dr.Molle

---

@"Dr.Molle"，你为什么从来没有提供过真正的解决方案呢？这背后有什么样的理念吗？如果是这种情况，我会给出一个具体的现实生活中的例子，而不是一份食谱。 - davidkonrad

我认为他的解决方案并不差。它让我能够深入思考问题。然而，有一个问题，在绘图库中有这样一条注释：“请注意，当在地图上进行绘制时，google.maps.Map事件（例如单击和mousemove）将被禁用。”那么我只需要使用浏览器事件监听器吗？我需要使用Google Maps的监听器来获取坐标，对吗？ - Skitterm

是的，你需要使用Maps-Listeners。你不需要drawing-library来实现它。 - Dr.Molle

你怎么了？这个解决方案有什么问题吗？Stack Overflow既不是代码交付服务，也不是留下不合格评论的平台。它是一个编程社区。 - Dr.Molle

@Dr.Molle，在这种情况下，你很幸运能够回答一个能够理解的OP。SO不仅仅是帮助那些已经拥有巨大编程技能的人。SO是关于帮助人们，你必须在他们自己的水平上帮助他们，这样他们才能变得更好——也许还能提高一个级别。SO不是通过复制粘贴手册或通用程序来帮助人们，即使那些声望最高的人是从引用手册中获得声望的。但我喜欢你的回答，有时候我只是认为你可以做得比引用链接、fusiontable或类似的更好。我在这里是为了帮助人们成为更好的程序员。 - davidkonrad