2013-08-11 8 views
5

リーフレットマーカークラスを拡張して位置マーカーを作成しようとしています。私の位置マーカーは、ユーザーの位置を表す内側の円と、ユーザーの位置の精度を表す外側の円から構成されます。私は多くのユーザーの場所を表示したいのでクラスを拡張しています。ユーザーごとに2つのマーカーを作成する必要はありません。リーフレットを拡張する際のポップアップマーカー

ポップアップがうまく動作するのに問題があります。 2つのこと:

  1. ポップアップが機能しません。つまり、決して表示されません。
  2. Iはplunkある、青いマーカーがポップアップと基準円であり、緑は私の拡張マーカーである。ここで外側の円(精度)

だけ内側の円(ユーザ場所)にポップアップを結合することができず、ポップアップが動作しません。 http://plnkr.co/edit/5tz538?p=preview

コード:

L.LocationMarker = L.Marker.extend({ 
    initialize: function (latlng, options) { 
    L.Marker.prototype.initialize.call(this, latlng); 

    this._accuracyCircle = L.circle(latlng, 0, { 
     color: options.color, 
     fillColor: options.color, 
     fillOpacity: 0.15, 
     weight: 2, 
     opacity: 0.5 
    }); 

    this._locationMarker = L.circleMarker(latlng, { 
     color: options.color, 
     fillColor: options.color, 
     fillOpacity: 0.7, 
     weight: 2, 
     opacity: 0.9, 
     radius: 5 
    }); 

    this._location = L.layerGroup([this._accuracyCircle, this._locationMarker]); 
    }, 

    addTo: function (map) { 
    map.addLayer(this._location); 
    return this; 
    }, 

    onAdd: function (map) { 
    this._map = map; 
    map.addLayer(this._location); 
    }, 

    onRemove: function (map) { 
    map.removeLayer(this._location); 
    }, 

    getLatLng: function() { 
    return this._locationMarker.getLatLng(); 
    }, 

    setLatLng: function (latlng) { 
    this._accuracyCircle.setLatLng(latlng); 
    this._locationMarker.setLatLng(latlng); 
    return this; 
    }, 

    setAccuracy: function (accuracy) { 
    this._accuracyCircle.setRadius(accuracy ? accuracy : 0); 
    return this; 
    } 
}); 

L.locationMarker = function (latlng, options) { 
    return new L.LocationMarker(latlng, options); 
}; 

答えて

3

がそれを手に入れました。私はlocationMarkerを処理するだけのポップアップメソッドをオーバーライドしなければならなかった。

bindPopup: function (content, options) { 
this._locationMarker.bindPopup(content, options); 
    return this; 
}, 

setPopupContent: function (content) { 
this._locationMarker.setPopupContent(content); 
    return this; 
}, 

unbindPopup: function() { 
this._locationMarker.unbindPopup(); 
    return this; 
}, 

_movePopup: function (e) { 
this._locationMarker.setLatLng(e.latlng); 
} 

Plunker: http://plnkr.co/edit/5tz538?p=preview

関連する問題