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

Question

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

В примере Rectangle такая центральная точка используется для расширения размера стороны прямоугольника. Но в моей Полилине этот момент при перетаскивании разбивает линию на две новые строки. Таким образом, каждый из них получает новый центр. Как следствие, вместо 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 точками? Благодаря

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