Comment lier plusieurs polylignes au marqueur draggable

Question

J'ai plusieurs polylignes et je veux lier ces polylignes avec un marqueur draggable. Lorsque j'essaie de lier le marqueur avec une polyligne, le marqueur disparaît.

var locations = { 
    "feed1": [ 
     [25.774252, -80.190262], 
     [18.466465, -66.118292], 
     [32.321384, -64.75737] 
    ], 
    "feed2": [ 

     [32.321384, -64.75737], 
     [36.321384, -88.75737] 
    ], 
    "feed3": [ 

     [20.466465, -68.118292], 
     [34.321384, -66.75737], 
     [27.774252, -82.190262] 
    ] 
}; 

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

function marFunc(event) { 
    console.log(event.latLng); 
    var path = poly.getPath(); 

    path.push(event.latLng); 
    var len = path.getLength(); 
    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map, 
     draggable: true 
    }); 
    marker.bindTo('position', poly.binder); 
} 

var poly; 
var map; 

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'), { 
     center: new google.maps.LatLng(25.774252, -80.190262), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var markers = new Array(); 
    var polycoordinate = Array(); 

    poly.binder = new MVCArrayBinder(poly.getPath()); 
    for (var i in locations) { 
     for (j in locations[i]) { 
      var evt = {}; 
      evt.latLng = new google.maps.LatLng(locations[i][j][0], locations[i][j][1]); 
      bounds.extend(evt.latLng); 
      marFunc(evt); 
     } 
    } 
    poly.setMap(map); 
    map.fitBounds(bounds); 
} 
google.maps.event.addDomListener(window, "load", initialize); 

Dans la fonction Je initialize() en boucle à travers l'objet et de rendre la polyligne en même temps je passe le lat lng à la fonction marFunc() pour créer marqueur.

C'est ce que je reçois:

Answer 1

Vous avez une erreur dans votre code (vous avez quitté le dernier argument de la fonction "BindTo"):

marker.bindTo('position', poly.binder); 

devrait être:

marker.bindTo('position', poly.binder, (len-1).toString()); 

question connexe: Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

extrait de code:

var locations = { 
 
    "feed1": [ 
 
    [25.774252, -80.190262], 
 
    [18.466465, -66.118292], 
 
    [32.321384, -64.75737] 
 
    ], 
 
    "feed2": [ 
 

 
    [32.321384, -64.75737], 
 
    [36.321384, -88.75737] 
 
    ], 
 
    "feed3": [ 
 

 
    [20.466465, -68.118292], 
 
    [34.321384, -66.75737], 
 
    [27.774252, -82.190262] 
 
    ] 
 
}; 
 

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

 
function marFunc(event) { 
 
    var path = poly.getPath(); 
 

 
    path.push(event.latLng); 
 
    var len = path.getLength(); 
 
    var marker = new google.maps.Marker({ 
 
    position: event.latLng, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 
    marker.bindTo('position', poly.binder, (len - 1).toString()); 
 
} 
 

 
var poly; 
 
var map; 
 

 
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'), { 
 
    center: new google.maps.LatLng(25.774252, -80.190262), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var markers = new Array(); 
 
    var polycoordinate = Array(); 
 

 
    poly.binder = new MVCArrayBinder(poly.getPath()); 
 
    for (var i in locations) { 
 
    for (j in locations[i]) { 
 
     var evt = {}; 
 
     evt.latLng = new google.maps.LatLng(locations[i][j][0], locations[i][j][1]); 
 
     bounds.extend(evt.latLng); 
 
     marFunc(evt); 
 
    } 
 
    } 
 
    poly.setMap(map); 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

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