Добавить полилинию по клику и показать следующую точку на курсоре мыши

Question

Не знаю, как сформулировать мой вопрос в заголовке, но я хочу, чтобы у меня была функция, которая ведет себя так же, как Ваши места -> Карты -> Создать карту на maps.google.com, когда вы нажимаете "Нарисуйте линию "-> кнопка" Добавить линию или форму ".Он запускает полилинию на карте, а затем показывает теневую линию от этих точек до курсора мыши, чтобы вы могли видеть, какой будет ваша линия при повторном нажатии:

Есть ли встроенные опции в API Карт Google для этого?У меня так много, когда пользователь нажимает на карту в первый раз:

function startNewLine(latLng) {
  var line = new google.maps.Polyline({
    draggable: true,
    editable: true,
  });

  line.setMap(boundaryMap);
  line.getPath().push(latLng);

  google.maps.event.clearListeners(boundaryMap, 'click');
}

Fiddle

Он начинает новую строку в точке, по которой был нажат, но это так далеко, как я получил.

Answer 1

Добавьте mousemove прослушиватель событий на карту.Используйте его для установки второй (или следующей) вершины ломаной линии.

boundaryMap.addListener('mousemove', function(e) {
  if (line && line.getPath() && line.getPath().getLength() > 0)
    line.getPath().setAt(1, e.latLng);
});

Для нескольких вершин:

boundaryMap.addListener('mousemove', function(e) {
  console.log("mousemove " + e.latLng.toUrlValue(6));
  if (line && line.getPath() && line.getPath().getLength() > (nextV - 1))
    line.getPath().setAt(nextV, e.latLng);
})

function startNewLine(latLng) {
  line = new google.maps.Polyline({
    draggable: true,
    editable: true,
  });
  nextV = 1;
  line.setMap(boundaryMap);
  line.getPath().push(latLng);
  line.addListener('click', function(e) {
    nextV++;
    console.log("line click " + e.latLng.toUrlValue(6));
  })
  line.addListener('dblclick', function(e) {
    console.log("line dblclick " + e.latLng.toUrlValue(6));
    google.maps.event.clearListeners(boundaryMap, "mousemove");
  })
  google.maps.event.clearListeners(boundaryMap, 'click');
}

доказательство концепции скрипки

фрагмент кода:

initMap();

var boundaryMap;
var line;
var nextV = 0;

function initMap() {
  boundaryMap = new google.maps.Map(document.getElementById("mapContainer"), {
    center: {lat: 37.1, lng: -95.7},
    zoom: 5
  });

  boundaryMap.addListener('click', function(e) {
    console.log("click " + e.latLng.toUrlValue(6));
    startNewLine(e.latLng);
  });
  boundaryMap.addListener('mousemove', function(e) {
    console.log("mousemove " + e.latLng.toUrlValue(6));
    if (line && line.getPath() && line.getPath().getLength() > (nextV - 1))
      line.getPath().setAt(nextV, e.latLng);
  })
}

function startNewLine(latLng) {
  line = new google.maps.Polyline({
    draggable: true,
    editable: true,
  });
  nextV = 1;
  line.setMap(boundaryMap);
  line.getPath().push(latLng);
  line.addListener('click', function(e) {
    nextV++;
    console.log("line click " + e.latLng.toUrlValue(6));
  })
  line.addListener('dblclick', function(e) {
    console.log("line dblclick " + e.latLng.toUrlValue(6));
    google.maps.event.clearListeners(boundaryMap, "mousemove");
  })
  google.maps.event.clearListeners(boundaryMap, 'click');
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapContainer" style="height: 100%; width: 100%;"></div>