Leafletjs-markers

提供：Dev Guides
移動先:案内、検索

LeafletJS-マーカー

マップ上の単一の場所をマークするために、リーフレットにはマーカーが用意されています。 これらのマーカーは標準のシンボルを使用し、これらのシンボルはカスタマイズできます。 この章では、マーカーを追加する方法と、マーカーをカスタマイズ、アニメーション化、および削除する方法について説明します。

シンプルマーカーの追加

Leaflet JavaScriptライブラリを使用してマーカーを地図に追加するには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、マークする位置を表す *latlng オブジェクトを渡すことにより、 Marker クラスをインスタンス化します。 

//Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

ステップ5 *- *Marker クラスの* addTo（）*メソッドを使用して、前の手順で作成したマーカーオブジェクトをマップに追加します。 

//Adding marker to the map
marker.addTo(map);

例

次のコードは、ハイデラバード（インド）という都市にマーカーを設定します。 

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
        //Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
        //Creating a map object
         var map = new L.map('map', mapOptions);

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

        //Adding layer to the map
         map.addLayer(layer);

        //Creating a marker
         var marker = L.marker([17.385044, 78.486671]);

        //Adding marker to the map
         marker.addTo(map);
      </script>
   </body>

</html>

それは次の出力を生成します-

シンプルマーカー

ポップアップをマーカーにバインド

メッセージを表示するシンプルなポップアップをマーカーにバインドするには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-マークする位置を表す *latlng オブジェクトを渡すことにより、 Marker クラスをインスタンス化します。

ステップ5 *-以下に示すように、 bindPopup（）*を使用してポップアップをマーカーに添付します。 

//Adding pop-up to the marker
marker.bindPopup('Hi Welcome to finddevguides').openPopup();

ステップ6 *-最後に、 *Marker クラスの* addTo（）メソッドを使用して、前の手順で作成した *Marker オブジェクトをマップに追加します。

例

次のコードは、都市ハイデラバード（インド）にマーカーを設定し、ポップアップを追加します。 

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
        //Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 15
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);        //Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);   //Creating a Marker

        //Adding popup to the marker
         marker.bindPopup('This is finddevguides').openPopup();
         marker.addTo(map);//Adding marker to the map
      </script>
   </body>

</html>

次の出力を生成します

マーカーへのポップアップ

マーカーオプション

マーカーの作成中に、latlangオブジェクトに加えて marker options 変数を渡すこともできます。 この変数を使用して、アイコン、ドラッグ可能、キーボード、タイトル、alt、zInsexOffset、不透明度、riseOnHover、riseOffset、ペイン、ドラッグ可能など、マーカーのさまざまなオプションに値を設定できます。

マップオプションを使用してマップを作成するには、以下に示す手順に従う必要があります-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

  • ステップ4 *-markerOptionsの変数を作成し、必要なオプションに値を指定します。
*markerOptions* オブジェクトを作成し（リテラルのように作成されます）、オプション *iconUrl* および *iconSize* の値を設定します。
//Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

ステップ5 *-マークする位置を表す *latlng オブジェクトと前のステップで作成したオプションオブジェクトを渡すことにより、 Marker クラスをインスタンス化します。 

//Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

ステップ6 *-最後に、 *Marker クラスの* addTo（）メソッドを使用して、前の手順で作成した *Marker オブジェクトをマップに追加します。

例

次のコードは、都市ハイデラバード（インド）にマーカーを設定します。 このマーカーは、タイトル MyLocation でクリックおよびドラッグできます。 

<html>
   <head>
      <title>Marker Options Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
        //Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
        //Creating a map object
         var map = new L.map('map', mapOptions);

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

        //Adding layer to the map
         map.addLayer(layer);

        //Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
        //Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);

        //Adding marker to the map
         marker.addTo(map);
      </script>
   </body>

</html>

次の出力を生成します

マーカーオプション

マーカーのカスタムアイコン

Leafletライブラリが提供するデフォルトのアイコンの代わりに、独自のアイコンを追加することもできます。 次の手順を使用して、デフォルトアイコンの代わりにカスタムアイコンをマップに追加できます。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- *markerOptions の変数を作成し、必要なオプションに値を指定します-

  • iconUrl -このオプションの値として、アイコンとして使用する画像のパスを指定する String オブジェクトを渡す必要があります。
  • iconSize -このオプションを使用すると、アイコンのサイズを指定できます。

注-これらに加えて、iconSize、shadowSize、iconAnchor、shadowAnchor、popupAnchorなどの他のオプションに値を設定することもできます。

以下に示すように、上記のオプション変数を渡すことにより、* L.icon（）*を使用してカスタムアイコンを作成します。 

//Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

//Creating a custom icon
var customIcon = L.icon(iconOptions);
  • ステップ5 *-markerOptionsの変数を作成し、必要なオプションに値を指定します。 これらに加えて、前の手順で作成したアイコン変数を値として渡すことにより、アイコンを指定します。
//Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

ステップ6 *-マークする位置を表す *latlng オブジェクトと前のステップで作成したオプションオブジェクトを渡すことにより、 Marker クラスをインスタンス化します。 

//Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

ステップ7 *-最後に、 *Marker クラスの* addTo（）メソッドを使用して、前の手順で作成した *Marker オブジェクトをマップに追加します。

例

次のコードは、finddevguidesの場所にマーカーを設定します。 ここでは、デフォルトのマーカーの代わりにfinddevguidesのロゴを使用しています。 

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
        //Creating map options
         var mapOptions = {
            center: [17.438139, 78.395830],
            zoom: 10
         }
        //Creating a map object
         var map = new L.map('map', mapOptions);

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

        //Adding layer to the map
         map.addLayer(layer);

        //Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
        //Creating a custom icon
         var customIcon = L.icon(iconOptions);

        //Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
        //Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);

        //Adding popup to the marker
         marker.bindPopup('Hi welcome to finddevguides').openPopup();

        //Adding marker to the map
         marker.addTo(map);
      </script>
   </body>

</html>

次の出力を生成します

マーカーカスタムアイコン

「https://www.finddevguides.com/index.php?title=Leafletjs-markers&oldid=35310」から取得
Powered by MediaWiki