Sto tentando di estendere la classe Indicatore per creare un indicatore di posizione. Il mio indicatore di posizione è costituito da un cerchio interno che rappresenta la posizione dell'utente e un cerchio esterno che rappresenta l'accuratezza della posizione dell'utente. Sto estendendo la classe perché voglio mostrare molti utenti e non voglio dover creare 2 marcatori per ciascun utente.Problemi con popup durante l'estensione del depliant Indicatore
Ho problemi a far funzionare il popup. Due cose:
- il popup non funziona, cioè non si presenta mai.
- posso legare il popup al solo (posizione degli utenti) cerchio interno, e non il cerchio esterno (precisione)
Ecco una Plunk, indicatore blu è cerchio di serie con pop-up, il verde è il mio marcatore estesa , popup non funziona. Codice 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);
};