web-dev-qa-db-ja.com

リーフレットオーサムマーカー（数字の追加）

Leaflet.Awesome-Markers プラグインと LeafletJS を使用しています。

正しく実装しましたが、マーカーを表すために0から9までの数字を使用できるようにしたいと思います。

以下は、プラグインの動作を示すJS Fiddle実装です。

http://jsfiddle.net/fulvio/VPzu4/200/

プラグインはfont-awesomeアイコンとグリフアイコンの使用を許可します（もちろん、どちらも0〜9の数字をアイコンとして提供しません。argh！）

ドキュメントではextraClassesを使用する機能について言及しており、アイコンではなく数字を表示するためにこれを活用する方法について誰かが私を正しい方向に向けることができるのか、または単に達成する別の方法があるのか​​と思っていましたこの。

よろしくお願いします。

UPDATE：

コメントをありがとう@ Can。

Awesome-markersの作者は別のツリーを取得し、あなたが探しているものを正確に追加しました awesome-markers with numbers/letters 縮小されていないJSを取得してください。

javascriptdictionaryleafletfont-awesomemarkers
21
fulvio

Awesome-Markersプラグインを使用する代わりに、Leafletで番号付きマーカーを作成するこの記事に従うことができます。

http://blog.charliecroom.com/index.php/web/numbered-markers-in-leaflet

関連する要旨は次のとおりです。

https://Gist.github.com/comp615/2288108

これが機能する簡単な例は次のとおりです。

// The text could also be letters instead of numbers if that's more appropriate
var marker = new L.Marker(new L.LatLng(0, 0), {
    icon:   new L.NumberedDivIcon({number: '1'})
});
15
Ben Smith

番号付きマーカープラグインを試してみましたが、アイコンは他の素晴らしいマーカーとは異なり、ページレイアウトスタイルに一貫性がないため、数字をサポートするように素晴らしいマーカープラグインに小さな変更を加えました。とてもシンプルです。

  1. これは番号付きマーカープラグインの効果です。よろしければ、私の答えをスキップしてください。 enter image description here

  2. leaflet.awesome-markers.jsの2行目を変更し、html： ""を追加します

    L.AwesomeMarkers.Icon = L.Icon.extend({
options: {
    iconSize: [35, 45],
    iconAnchor:   [17, 42],
    popupAnchor: [1, -32],
    shadowAnchor: [10, 12],
    shadowSize: [36, 16],
    className: 'awesome-marker',
    prefix: 'glyphicon',
    spinClass: 'fa-spin',
    extraClasses: '',
    icon: 'home',
    markerColor: 'blue',
    iconColor: 'white',
    html : ""
},

  3. leaflet.awesome-markers.jsの80行目を変更します。

    return "<i " + iconColorStyle + "class='" + options.extraClasses + " " 
+ options.prefix + " " + iconClass + " " + iconSpinClass + " " 
+ iconColorClass + "'>" + options.html + "</i>";

  4. アイコンを作成するときは、以前と同じように呼び出します

    var jobMarkerIcon = L.AwesomeMarkers.icon({
icon: '',
markerColor: 'darkblue',
prefix: 'fa',
html: (i+1)
});

  5. 45行目と47行目をコメント化します。

  6. 結果は以下のスクリーンショットのようになります。 enter image description here

  7. コード変更の差分は以下に示します。 enter image description here

35
rockXrock

別の戦略は、 Leaflet.ExtraMarkersプラグインを使用することです

次のオプションを使用して数値マーカーをコーディングします。

var numMarker = L.ExtraMarkers.icon({
icon: 'fa-number',
number: 12,
markerColor: 'blue'
});
L.marker([41.77, -72.69], {icon: numMarker}).addTo(map);
7
jackdougherty

Font-awesomeを使用したくない場合は、ここに示すかなりシンプルなソリューションを使用します。 Simple Numbered Markers 追加のライブラリは必要ありません。すでにリーフレットに入っています。次のようなアイコン画像を含むCSSクラスを作成するだけです。

.number-icon
{
    background-image: url("images/number-marker-icon.png");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-align:center;
    color:white;
    font-weight: bold;   
}

次に、次のようなアイコンを作成します。

var numberIcon = L.divIcon({
      className: "number-icon",
      shadowSize: [20, 30], // size of the shadow
      iconAnchor: [20, 40], 
      shadowAnchor: [4, 30],  // the same for the shadow
      popupAnchor: [0, -30],
      html: variable_containing_the_number        
});

var marker = new L.marker([lat, long],
{                               
    icon: numberIcon                               
});
0
Saadat