Google Maps V3折线：可在没有中心点的情况下进行编辑

Question

我正在与Google Maps Api V3折线作战。此API可以创建用户可编辑的形状，如tutorial显示的Rectangle形状。但是，当我对折线执行相同操作时，线段的中心就会出现问题。

在Rectangle示例中，这样的中心点用于扩展矩形边的大小。但是在我的折线中，拖动该点会将线分成两条新线。因此，他们每个人都有一个新的中心。结果，我现在只有5分，而不是2分。这是无止境的：每次我单击一个中心点并将其拖动时，它都会创建新的点。

这是我的代码的一部分：

var polyCoord = [
        new google.maps.LatLng(41.86, 8.73),
        new google.maps.LatLng(41.88, 8.75)
    ];

    // Polyline
    var pol = new google.maps.Polyline({
        path: polyCoord,
        editable: true
    });
    pol.setMap(map);

如何仅用2个点制作可编辑的折线？谢谢

Answer 1

使用此问题的概念：Avoiding vertex drag maps api v3

1. 不要使用可编辑的折线（不需要的折线在中间）。]]

2. 将标记绑定到折线的两个顶点中的每个顶点，使其可拖动。

proof of concept fiddle

代码段：

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polyCoord = [
    new google.maps.LatLng(41.86, 8.73),
    new google.maps.LatLng(41.88, 8.75)
  ];
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(polyCoord[0]);
  bounds.extend(polyCoord[1]);
  map.fitBounds(bounds);
  // Polyline
  var pol = new google.maps.Polyline({
    path: polyCoord
  });
  pol.binder = new MVCArrayBinder(pol.getPath());
  var marker0 = new google.maps.Marker({
    position: event.latLng,
    title: '#0',
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    },
    draggable: true
  });
  marker0.bindTo('position', pol.binder, (0).toString());
  var marker1 = new google.maps.Marker({
    position: event.latLng,
    title: '#1',
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    },
    draggable: true
  });
  marker1.bindTo('position', pol.binder, (1).toString());
  pol.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);

/*
 * Use bindTo to allow dynamic drag of markers to refresh poly.
 */

function MVCArrayBinder(mvcArray) {
  this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
  if (!isNaN(parseInt(key))) {
    return this.array_.getAt(parseInt(key));
  } else {
    this.array_.get(key);
  }
}
MVCArrayBinder.prototype.set = function(key, val) {
  if (!isNaN(parseInt(key))) {
    this.array_.setAt(parseInt(key), val);
  } else {
    this.array_.set(key, val);
  }
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac; "></div>