2013-08-11 3 views
5

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:

  1. il popup non funziona, cioè non si presenta mai.
  2. 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); 
}; 

risposta

3

ottenuto. Ho dovuto sovrascrivere i metodi popup per gestire solo 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

Problemi correlati