5

リーフレット Marker クラスを拡張してロケーション マーカーを作成しようとしています。現在地マーカーは、ユーザーの位置を表す内側の円と、ユーザーの位置の精度を表す外側の円で構成されています。多くのユーザーの場所を表示したいので、クラスを拡張しています。ユーザーごとに 2 つのマーカーを作成する必要はありません。

ただし、ポップアップを機能させるのに問題があります。2つのこと：

  1. ポップアップは機能しません。つまり、表示されません。
  2. ポップアップを内側の円 (ユーザーの場所) のみにバインドし、外側の円 (精度) にはバインドできませんか?

ここにプランクがあります。青いマーカーはポップアップ付きの標準的な円、緑は私の拡張マーカーです。ポップアップは機能しません。 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);
};
4

1 に答える 1

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);
}

プランカー: http://plnkr.co/edit/5tz538?p=preview

于 2013-08-11T15:23:56.627 に答える