Google Maps V3多段線：無需編輯中心即可編輯

Question

我正在使用Google Maps Api V3多段線進行拼圖。使用此API可以創建用戶可編輯的形狀，因爲此tutorial顯示爲矩形形狀。但是當我用Polyline做同樣的事情時，我對該段的中心有問題。

在矩形的例子中，這樣一箇中心點用於擴展矩形邊的大小。但是在我的Polyline中，當拖動時，這一點將線條分成兩行。因此，他們每個人都有一個新的中心。結果，而不是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>