如何将多条折线绑定到可拖动标记

Question

我有多条折线，我想用可拖动标记绑定这些折线。当我尝试用多段线绑定标记时，标记将消失。

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

在我通过对象循环和在我传递的纬度经度的marFunc（）函数来创建标记的同时呈现折线初始化（）函数。

这就是我得到：

Answer 1

您在代码中有一个错字（你离开了“bindTo”函数的最后一个参数）：

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

应该是：

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

相关问题：Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

代码片段：

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>