3

現在、ノードをクリックしてマップ上にポリゴンまたはポリラインを描画できます。ただし、川や海岸線などのフィーチャをたどる場合、これは退屈で不正確な場合があります。

マウスをクリックしてドラッグするか、クリックして開始し、パスをドラッグしてからクリックして停止することで、パスを描画できる方法を知っている人はいますか?

DrawingManager と MouseEvent を見てきましたが、有望なものはまだ見当たりません。

click や mouseMove などのイベントに基づいて描画する方法はありますか?

これにより、より正確で迅速な機能が可能になります。

4

1 に答える 1

14

考えられるワークフロー:

  1. onmousedownマップ上で、マップのdraggable-option を に設定し、-Instance をfalse作成して、の-option を に設定します。PolylineclickablePolylinefalse

  2. マップの - イベントを観察し、mousemoveそれが発生するたびに、返さLatLngれたをのパスにプッシュしますPolyline

  3. onmouseupmousemoveマップの-listener を削除し、マップのdraggable-option を に戻し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>

于 2013-10-23T17:15:39.667 に答える