1

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

带标记： var initialPosition = new google.maps.Marker({ position: { lat: -22.397542, lng: -46.884630 } });

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

4

1 回答 1

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>

于 2018-10-03T08:58:43.413 回答