javascript - 从初始位置绘制 POLYGON

Question

我的问题是:我需要使用带有初始点的 POLYGON 模式进行绘制，例如标记或其他元素。例如 - JSFiddle Example

带标记:
var initialPosition = new google.maps.Marker({
位置: {
纬度:-22.397542，
液化天然气:-46.884630
}
});


这个位置是在没有任何用户交互的情况下给出的。我怎样才能做到这一点？在我的示例中，如何在不单击标记的情况下从标记开始绘制多边形，使标记位置成为我的第一个多边形点？

Answer 1

您可以执行以下操作:使用 addListenerOnce 检测 map 上的点击(仅一次)。这将允许创建一个多边形，从您的标记位置到用户点击的位置，然后返回到标记位置。

通过将 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>