30

リーフレットを使用して作成されたマップのカスタマイズを検討しており、ポップアップ (L.popup) をカスタマイズしたいと考えています。

私が考えることができる唯一の方法は、新しいダイアログを使用してカスタム ポップアップ レイヤーを作成し、ユーザーがマーカーを操作するたびにこれを再配置することです。このようにして、ユーザーがマップをドラッグしてもポップアップが整列されたままになります。

これを行うための代替手段または既存の方法を知っている人はいますか?

ありがとう

4

3 に答える 3

44

css を使用してルック アンド フィールをカスタマイズする必要があります。次のセレクターはおそらく興味深いものです。

.leaflet-popup-content-wrapper {
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
}

.leaflet-popup-tip-container {
}

ブラウザーに応じて、 Firefox のFirebugや Chrome/Safari のビルドイン開発者ツール (ページの任意の場所を右クリックして [要素の検査] をクリックするか、ショートカットを使用) などのツールを使用して、ポップアップを検査し、追加の css セレクターを見つけることができます。変更することもできます。

その機能を拡張するには、まずポップアップのソース コードを確認する必要があります。何が起こっているのかをある程度理解するまで、他の Leaflet コンポーネントのソースを調べてください。次の方法で Popup クラスを拡張し、必要に応じて変更します。

L.CustomPopup = L.Popup.extend({
  // You changes here
});
于 2012-10-05T23:48:01.980 に答える
22

ポップアップをカスタマイズする別の方法は、次のようなポップアップのカスタム css クラスを作成することです。

<style>
/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
    background: #e0e0e0;
    color: #234c5e;
}
</style>

次に、マップでメソッドをdiv使用してマーカー カスタム ポップアップを設定し、 customOptionsオブジェクトを渡すことができます。bindPopupcss class name

// create popup contents
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>";

// specify popup options 
var customOptions =
    {
    'maxWidth': '400',
    'width': '200',
    'className' : 'popupCustom'
    }


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map);

// bind the custom popup 
marker.bindPopup(customPopup,customOptions);

それが役に立てば幸い。

于 2016-11-05T15:34:51.083 に答える
5

leaflet.js を使用する mapbox に例があります。この例は、 leaflet でカスタム ツールチップを使用する方法を示しています。

<style>
/*
 * These CSS rules affect the tooltips within maps with the custom-popup
 * class. See the full CSS for all customizable options:
 * https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
  }
</style>

<div class='custom-popup' id='map'></div>
于 2016-01-27T18:08:26.327 に答える