避免頂點拖動地圖API v3

Question

非常簡單。我想避免拖動第一個和最後一個頂點。我嘗試過使用dragstart事件，但顯然折線不會聽那個。

我設法做了一些set_at。我保存了最後一個位置，當調用set_at時，我檢查該頂點的索引，然後將該頂點的latLng設置爲舊頂點。這隻能使用setAt函數來重新觸發事件。

所以創建了一個ignoreNextEvent標誌，所以它不會進行無限循環。

問題是，setAt函數os被地圖api使用了很多次，並且解決方案雖然工作，但並不完美，每當我與多段線進行交互時，我需要擔心ignoreNextEvent。

我試圖找到一種方法來實現這一點，任何人都可以幫忙嗎？

工作代碼：

google.maps.event.addListener(cable.getPath(), 'set_at', function(e){ 
    if(!ignoreNextEvent){ 
     if(e == 0 || e == cable.getPath().length-1){ 
      var point = new google.maps.LatLng(cable.Cable.vertex[e].latitude, cable.Cable.vertex[e].longitude); 
      ignoreNextEvent = true; 
      cable.getPath().setAt(e,point); 
     }else{ 
      if(cable.Cable.idx != 0){ saveCable(index, cable.Cable.destination_idx); } 
     } 
    }else{ 
     ignoreNextEvent = false; 
    } 
}); 

Answer 1

創建一個折線，綁定可拖動標記以要能夠拖動，約束是不能拖動到你不想頂點標記的頂點能夠拖動。

example

var gmarkers = []; 
var map; 

    function addLatLng(event) { 
    var path = poly.getPath(); 
    path.push(event.latLng); 
    var len = path.getLength(); 
    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     title: '#' + len, 
     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(4,4) 
     }, 
     draggable : true 
    }); 
    gmarkers.push(marker); 
    marker.bindTo('position', poly.binder, (len-1).toString()); 
    } 

function initialize() { 
    var polyOptions = { 
     strokeColor: '#000000', 
     strokeOpacity: 1.0, 
     strokeWeight: 3, map: map 
    }; 
    poly = new google.maps.Polyline(polyOptions); 
    var bounds = new google.maps.LatLngBounds(); 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
    center: new google.maps.LatLng(10.9386, -84.888), 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    poly.binder = new MVCArrayBinder(poly.getPath()); 
    for(var i = 0; i < locations.length; i++) { 
    var evt = {}; 
    evt.latLng = new google.maps.LatLng(locations[i][0], locations[i][1]); 
    bounds.extend(evt.latLng); 
    addLatLng(evt); 
    } 
    gmarkers[0].setDraggable(false); 
    gmarkers[gmarkers.length-1].setDraggable(false); 


    poly.setMap(map); 
    map.fitBounds(bounds); 
} 
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); 
    } 
    } 

代碼片段：

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

 
/** 
 
* Handles click events on a map, and adds a new point to the Polyline. 
 
* @param {MouseEvent} mouseEvent 
 
*/ 
 
function addLatLng(event) { 
 
    var path = poly.getPath(); 
 
    path.push(event.latLng); 
 
    var len = path.getLength(); 
 
    var marker = new google.maps.Marker({ 
 
    position: event.latLng, 
 
    title: '#' + len, 
 
    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(4, 4) 
 
    }, 
 
    draggable: true 
 
    }); 
 
    gmarkers.push(marker); 
 
    marker.bindTo('position', poly.binder, (len - 1).toString()); 
 
} 
 
var locations = [ 
 
    [-33.890542, 151.274856, 4, 'Bondi Beach'], 
 
    [-33.923036, 151.259052, 5, 'Coogee Beach'], 
 
    [-34.028249, 151.157507, 3, 'Cronulla Beach'], 
 
    [-33.80010128657071, 151.28747820854187, 2, 'Manly Beach'], 
 
    [-33.950198, 151.259302, 1, 'Maroubra Beach'] 
 
]; 
 

 
var poly; 
 
var map; 
 
var gmarkers = []; 
 

 
function initialize() { 
 
    var polyOptions = { 
 
    strokeColor: '#000000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 3, 
 
    map: map 
 
    }; 
 
    poly = new google.maps.Polyline(polyOptions); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    center: new google.maps.LatLng(10.9386, -84.888), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    poly.binder = new MVCArrayBinder(poly.getPath()); 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var evt = {}; 
 
    evt.latLng = new google.maps.LatLng(locations[i][0], locations[i][1]); 
 
    bounds.extend(evt.latLng); 
 
    addLatLng(evt); 
 
    } 
 
    gmarkers[0].setDraggable(false); 
 
    gmarkers[0].setIcon({ 
 
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", 
 
    size: new google.maps.Size(7, 7), 
 
    anchor: new google.maps.Point(4, 4) 
 
    }); 
 
    gmarkers[gmarkers.length - 1].setDraggable(false); 
 
    gmarkers[gmarkers.length - 1].setIcon({ 
 
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", 
 
    size: new google.maps.Size(7, 7), 
 
    anchor: new google.maps.Point(4, 4) 
 
    }); 
 

 

 
    poly.setMap(map); 
 
    map.fitBounds(bounds); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>