Google Maps Draw - 通过拖动绘制线条或多边形 [英] Google Maps Draw -- draw line or polygon by dragging

问题描述

目前，您可以通过单击在地图上绘制多边形或多段线，从而创建一个节点。但是，如果您想要关注诸如河流或海岸线等功能，这可能既乏味又不健康。

有人知道如何通过点击拖动鼠标或点击开始绘制路径，然后拖动路径，然后单击以停止？

我已经看过了DrawingManager和MouseEvent，但我还没看到任何有希望的东西。

有没有方法根据点击和鼠标移动等事件连接绘图？

这样可以获得更准确和快速的功能。

解决方案

可能的工作流程：

1. onmousedown 在地图上将 draggable 选项设置为 false ，创建 Polyline -Instance并设置可点击的 - Polyline to false




2. 观察 mousemove -event，每次发生时，将返回的 LatLng 推送到 Polyline




3. onmouseup 为地图移除 mousemove -listener并设置 draggable - 选择映射回 true 。您的 Polyline 已完成




4. 当您不想创建 Polygon ，现在创建一个 Polygon -instance，将 Polygon 的路径设置为 Polyline 的路径，并移除 Polyline





---

<编辑> ：
建议仅使用鼠标右键来绘制，否则地图将无法拖动。

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

<代码片段：（来自链接的jsfiddle）

$ b

function initialize（）{var mapOptions = {zoom：14，center：新的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）{//只有在（e.button！= 2）返回时才用鼠标右键实现; //多边形poly = new google.maps.Polyline（{map：map，clickable：false}）; //移动侦听器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 .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>使用鼠标右键绘制覆盖图< br />< select id = 重叠 > < option value =Polyline> Polyline< / option> < option value =Polygon> Polygon< / option>< / select>< div id =map_canvas>< / div>

Currently, you can draw polygons or polylines on a map by clicking, which creates a node. However, if you wanted to follow a feature such as a river or shoreline, this could be both tedious and innacurate.

Does anyone know of a way where a path could be drawn either by click-dragging the mouse, or by clicking to start, then dragging a path, then clicking to stop?

I've looked at the DrawingManager and MouseEvent, but I'm not seeing anything promising yet.

Is there a way to wire up drawing based on events such as click and mouseMove?

This would allow for much more accurate and quick features.

解决方案

Possible workflow:

1. onmousedown on the map set the draggable-option of the map to false, create a Polyline-Instance and set the clickable-option of the Polyline to false

2. observe the mousemove-event of the map, each time it occurs push the returned LatLng to the path of the Polyline

3. onmouseup remove the mousemove-listener for the map and set the draggable-option of the map back to true. Your Polyline has been finished

4. When you wan't to create a Polygon, create now a Polygon-instance, set the path of the Polygon to the path of the Polyline and remove the Polyline

---

<edit>: It's recommendable to draw only with a pressed right mousebutton, otherwise the map would never be draggable.

Demo: http://jsfiddle.net/doktormolle/YsQdh/

code snippet: (from linked 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>

这篇关于Google Maps Draw - 通过拖动绘制线条或多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！