Google Maps V3折线：无需中心点即可编辑 [英] Google Maps V3 Polyline : make it editable without center point(s)

问题描述

我正在苦苦挣扎Google Maps Api V3多段线。使用此API可以创建用户可编辑的形状，因为此教程显示了矩形形状。但是当我对Polyline做同样的处理时，我遇到了线段中心的问题。

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

以下是我的代码的一部分：

  var polyCoord = [
 new google.maps.LatLng（41.86，8.73），
 google.maps.LatLng（ 41.88，8.75）
]; 
 $ b $ // Polyline 
 var pol = new google.maps.Polyline（{
 path：polyCoord，
 editable：true 
}）; 
 pol.setMap（map）; 
  

如何仅用2点就可编辑多段线？谢谢

解决方案

使用这个问题的概念：避免顶点拖动地图api v3

1. Don'使用可编辑的多段线（那些编辑句柄在你不想要的中间）。
   

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

概念证明小提琴

代码段：

html，body，＃map_canvas {height：100 ％;宽度：100％; margin：0px; < script src =https：//

I'm struggling with Google Maps Api V3 Polylines. It is possible with this API to create user-editable shapes, as this tutorial shows for the Rectangle shape. But when I do the same with a Polyline, I have a problem with the center of the segment.

In the Rectangle example, such a center point is used to extend the size of the rectangle's side. But in my Polyline, this point, when dragged, breaks the line onto two new lines. Thus, each of them gets a new center. As a consequence, instead of 2 points, I now have 5 points. And this is endless : everytime I click on a center point and I drag it, it creates new points.

Here is a part of my code :

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

How can I make editable Polylines with only 2 points ? Thanks

解决方案

Using the concept from this question: Avoiding vertex drag maps api v3

1. Don't use editable polylines (those have the edit handle in the middle that you don't want).

2. Bind a marker to each of the two vertices of the polyline, make those draggable.

proof of concept fiddle

code snippet:

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"></script>
<div id="map_canvas" style="border: 2px solid #3872ac; "></div>

这篇关于Google Maps V3折线：无需中心点即可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！