如何在每次點擊按鈕時創建新對象並存儲舊數組？ OOP JavaScript

如何在每次單擊「創建新聚合」按鈕時，將最後一個對象存儲在數組中，並創建一個新的乾淨對象以在地圖上繪製新的單獨折線。我想保留舊的多段線的功能。現在不可能清潔物體。以下簡要示例。如何在每次點擊按鈕時創建新對象並存儲舊數組？ OOP JavaScript

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

來源

2012-05-22 roza

即使是做什麼奔戴維斯建議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 
    }); 
});

來源

2012-05-23 00:21:40

據我所知，我需要完整版本才能做到這一點，沒有包裝，但我還沒有經驗。謝謝。 – roza

我現在知道了，我會更新一個不需要包裝函數的答案。 –

我已更新它。 –

我相信你的問題與變量的作用域有關。你應該在create（）函數中聲明poly。另外，我認爲在create（）函數中將創建的對象推送到數組中會更有意義，從而堅持分離關注點。

此外，在您的addPoint（）函數中，當您應該使用「this」時，指的是全局多變量。

更新代碼：

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

來源

2012-05-23 00:03:17

如何在每次點擊按鈕時創建新對象並存儲舊數組？ OOP JavaScript

回答

相關問題