Question

我正在努力使用Google Maps Api V3 Polylines。使用此API可以创建用户可编辑的形状，因为此tutorial显示为Rectangle形状。但是当我对Polyline做同样的事情时，我对该段的中心有问题。

在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

不要使用可编辑的折线（那些在你不想要的中间有编辑句柄）。
将标记绑定到折线的两个顶点中的每个顶点，使其成为可拖动的。

proof of concept fiddle

代码段

＆＃13;

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);
  }
}

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac; "></div>

＆＃13;

Google Maps V3 Polyline：无需中心点即可编辑

1 个答案: