Question

我的问题是：我需要使用模式POLYGON绘制一个初始点，例如标记或其他元素。例如-JSFiddle Example

带标记： 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>

从初始位置绘制多边形

1 个答案: