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