Полилиния Google Maps V3: сделайте ее редактируемой без центральной точки (точек)

Я борюсь с полилиниями Google Maps Api V3. С помощью этого API можно создавать редактируемые пользователем фигуры, как это учебник показывает фигуру прямоугольника. Но когда я делаю то же самое с ломаной, у меня возникает проблема с центром сегмента.

В примере с прямоугольником такая центральная точка используется для увеличения размера стороны прямоугольника. Но в моей полилинии эта точка при перетаскивании разбивает линию на две новые линии. Таким образом, каждый из них получает новый центр. Как следствие, вместо 2 баллов у меня теперь 5 баллов. И это бесконечно: каждый раз, когда я нажимаю на центральную точку и перетаскиваю ее, создаются новые точки.

Вот часть моего кода:

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 точками? Спасибо


google-maps-api-3 google-polyline
person Fafanellu    schedule 27.08.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Используя концепцию из этого вопроса: Избегание карт перетаскивания вершин API v3

  1. Не используйте редактируемые полилинии (те, у которых есть ручка редактирования в середине, которая вам не нужна).

  2. Привяжите маркер к каждой из двух вершин полилинии, сделайте их перетаскиваемыми.

доказательство концепции скрипки

фрагмент кода:

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>

person geocodezip    schedule 27.08.2015