Как создать новый объект и сохранить старый в массиве каждый раз при нажатии кнопки? OOP JavaScript

Question

Как каждый раз при нажатии кнопки «Создать новый поли», сохраните последний объект в массиве и создайте новый чистый объект, чтобы нарисовать на карте новую разделенную полилинию. Я хотел бы сохранить функциональность старых полилиний. Теперь невозможно очистить объект. Упрощенный пример представлен ниже.

HTML:

<button onclick="create()">Create New Poly</button> 
<div id="map" style="width: 500px; height: 400px;"></div> 

JS:

var map; 
var listener; 

var polys = [], 
    poly = {}; 

create = function() { 
    poly = new Poly(); 

    if (!! listener) google.maps.event.removeListener(listener); 
    listener = google.maps.event.addListener(map, 'click', function(e) { 
     poly.addPoint(e.latLng); 
    }); 
} 

function Poly() { 
    this.markers = []; 
    this.setMap(map); 
    polys.push(this); 
} 
Poly.prototype = new google.maps.Polyline(); 

Poly.prototype.addPoint = function(p) { 
    var m = poly.createMarker(p); 
    poly.markers.push(m); 
    poly.getPath().push(p); 
} 

Poly.prototype.createMarker = function(p) { 
    var marker = new google.maps.Marker({ 
     position: p 
    }); 
    marker.setMap(this.getMap()); 
    return marker; 
} 

$(function() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(48.864715, 10.546875), 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
}); 

Демо: JSFIDDLE

Answer 1

Даже после того, как делать то, что Бен Дэвис предложил http://jsfiddle.net/LxGmR/ он все еще показывает проблему.

Который я думаю, из-за всех объектов Ploy, имеющих один и тот же прототип: Poly.prototype = new google.maps.Polyline();. Я считаю, что исправление заключается в том, что каждый новый объект Ploy нуждается в собственном экземпляре прототипа google.maps.Polyline.

Что после тестирования, я нашел, чтобы быть правдой: http://jsfiddle.net/uhZFE/

Потом я посмотрел, как сделать это без функции обертки, я использовал метод, описанный в SO ответ https://stackoverflow.com/a/6519265/388787 (http://javascript.crockford.com/prototypal.html также полезно) и произведено http://jsfiddle.net/YgSwF/, что является следующим: он работает по вашему запросу:

var map; 
var listener; 

var polys = []; 

create = function() { 
    var poly = new Poly(); 

    if (!! listener) google.maps.event.removeListener(listener); 
    listener = google.maps.event.addListener(map, 'click', function (e) { 
    poly.addPoint(e.latLng); 
    }); 
    polys.push(poly); 
} 

function Poly() { 
    google.maps.Polyline.call(this); 
    this.markers = []; 
    this.setMap(map); 
} 
Poly.prototype = Object.create(google.maps.Polyline.prototype); 

Poly.prototype.addPoint = function (p) { 
    var m = this.createMarker(p); 
    this.markers.push(m); 
    this.getPath().push(p); 
} 

Poly.prototype.createMarker = function (p) { 
    var marker = new google.maps.Marker({ 
    position: p 
    }); 
    marker.setMap(this.getMap()); 
    return marker; 
} 

$(function() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(48.864715, 10.546875), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
});​ 

Answer 2

Я считаю, что ваша проблема связана с переменной области. Вы должны объявить poly внутри функции create(). Кроме того, я думаю, что было бы более целесообразно делать толкание созданного объекта в массив внутри функции create(), чтобы придерживаться разделения проблем.

Кроме того, в вашей функции addPoint() вы ссылаетесь на глобальную переменную poly, когда вы должны использовать «это».

Обновленный код:

var map; 
var listener; 

var polys = []; 

create = function() { 
    var poly = new Poly(); 

    if (!! listener) google.maps.event.removeListener(listener); 
    listener = google.maps.event.addListener(map, 'click', function(e) { 
     poly.addPoint(e.latLng); 
    }); 
    polys.push(poly); 
} 

function Poly() { 
    this.markers = []; 
    this.setMap(map); 
} 
Poly.prototype = new google.maps.Polyline(); 

Poly.prototype.addPoint = function(p) { 
    var m = this.createMarker(p); 
    this.markers.push(m); 
    this.getPath().push(p); 
} 

Poly.prototype.createMarker = function(p) { 
    var marker = new google.maps.Marker({ 
     position: p 
    }); 
    marker.setMap(this.getMap()); 
    return marker; 
} 

$(function() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(48.864715, 10.546875), 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
});​