Рисование полигона из начальной позиции

Question

Моя проблема: мне нужно рисовать в режиме POLYGON с начальной точкой, такой как маркер или другой элемент.Например - JSFiddle Пример

С маркером: var initialPosition = new google.maps.Marker({ position: { lat: -22.397542, lng: -46.884630 } });

Эта позиция задается без какого-либо взаимодействия с пользователем.Как я могу это сделать?В моем примере, как я могу нарисовать многоугольник, начиная с маркера, не щелкая его, делая положение маркера моей первой точкой многоугольника?

Answer 1

Вы можете сделать следующее: используйте addListenerOnce, чтобы обнаружить щелчок на карте (только один раз).Это позволит создать многоугольник, который идет от вашей позиции маркера, туда, где пользователь щелкнул, и обратно к позиции маркера.

Установив для свойства editable значение true, вы можете перемещать каждую из них.Отдельно укажите точку многоугольника и добавьте сегменты, перетаскивая среднюю точку (и) существующих сегментов.

Вот рабочий пример:

function initialize() {

  var myLatLng = new google.maps.LatLng(46.2, 6.17);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });

  google.maps.event.addListenerOnce(map, 'click', function(e) {

    var origin = marker.getPosition();
    var coords = [
      origin,
      e.latLng,
      origin,
    ];

    var poly = new google.maps.Polygon({
      map: map,
      paths: coords,
      editable: true,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
  });
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>