Linha de desenho ou polígono do Google Maps ao arrastar

Question

Linha de desenho ou polígono do Google Maps ao arrastar

de momento, você pode desenhar polígonos ou polilinas num mapa clicando, o que cria um nó. No entanto, se você quisesse seguir uma característica como um rio ou linha de Costa, isso poderia ser tedioso e inacurato.

Alguém sabe de uma forma onde um caminho pode ser desenhado, quer carregando em arrastar o rato, quer carregando para iniciar, depois arrastando um caminho, e depois carregando para parar?

Olhei para o desenhador e para o MouseEvent, mas não vejo nada promissor. ainda.

Há alguma forma de fazer um desenho baseado em eventos como click e mouseMove?

Isto permitiria características muito mais precisas e rápidas.

2

javascript google-maps google-maps-api-3

Author: Skitterm, 2013-10-23

Source

1 answers

score 12 · Accepted Answer

Possível fluxo de trabalho:

onmousedown no mapa, defina a opção draggable - do mapa para false, crie uma Polyline-instância e defina a opção clickable - opção do Polyline para false
Observe o evento mousemove do mapa, cada vez que ele ocorre empurre o retornado LatLng para o caminho do Polyline
onmouseup remove o mousemove-ouvinte para o mapa e configure a opção draggable - do mapa para true. O seu Polyline foi terminado
Quando você não quiser criar uma Polygon, crie agora uma instância Polygon, defina o caminho do Polygon para o caminho do Polyline e remova o Polyline

<edit>: É recomendável desenhar apenas com um mousebutton direito pressionado, caso contrário o mapa nunca seria draggable.

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

Excerto do Código: (a partir de dados ligados 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>