Google地圖繪制 - 通過拖動繪制線條或多邊形

Question

目前，您可以通過單擊來創建節點，從而在地圖上繪制多邊形或折線。 但是，如果您想要遵循河流或海岸線等功能，這可能既乏味又無懈可擊。

有沒有人知道可以通過單擊拖動鼠標，或單擊開始，然后拖動路徑，然后單擊停止來繪制路徑的方法？

我看過DrawingManager和MouseEvent，但我還沒有看到任何有希望的東西。

有沒有辦法根據click和mouseMove等事件連接繪圖？

這將允許更准確和快速的功能。

Answer 1

工作流程：

1. onmousedown在地圖上設置的draggable地圖上的-選項false ，創建一個Polyline -instance並設置clickable的的-選項Polyline到false

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>