0

[新しいポリを作成]ボタンをクリックするたびに、最後のオブジェクトを配列に格納し、新しいクリーンなオブジェクトを作成して、マップ上に新しい分離されたポリラインを描画する方法。古いポリラインの機能を維持したいと思います。現在、オブジェクトをクリーンアップすることはできません。簡略化した例を以下に示します。

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

4

2 に答える 2

2

Ben Davisが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-23T00:21:40.067 に答える
1

あなたの問題は変数のスコープに関係していると思います。create() 関数内で poly を宣言する必要があります。また、作成されたオブジェクトを create() 関数内の配列にプッシュして、関心の分離を順守する方が理にかなっていると思います。

また、addPoint() 関数では、「this」を使用する必要があるときに、グローバル 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
    });
});​
于 2012-05-23T00:03:17.087 に答える