Leafletのマーカー表示|Web地図サービスの為のオープンソースライブラリ

LeafletのMarkerの使い方についての解説です。

markerの作成
1. Options
markerのポップアップ
全体コード

markerの作成

L.marker(<LatLng> latlng, <Marker options> options?)

markerを配置する緯度経度情報とオプション情報を指定して、インスタンスを生成します。

例）L.marker([35.689501,139.691722],{title:”東京都庁”})

Options

Option	Type	Default	Description
`icon`	Icon	*	markerのアイコンを指定します。
`keyboard`	Boolean	true	マーカーをキーボードでタブ移動し、Enter キーを押してクリックできるかどうか指定します。
`title`	String	”	markerのツールチップを指定します。
`alt`	String	‘Marker’	マーカーのalt属性を指定します。
`zIndexOffset`	Number	0	マーカーのzIndex属性を指定します。
`opacity`	Number	1.0	マーカーの透明度属性を指定します。
`riseOnHover`	Boolean	false	マーカーのHover属性を指定します。
`riseOffset`	Number	250	riseOnHoverの為のzIndexオフセットを指定します。
`pane`	String	‘markerPane’	マーカーを追加するMap paneを指定します。
`shadowPane`	String	‘shadowPane’	マーカーの影を追加するMap paneを指定します。
`bubblingMouseEvents`	Boolean	false	マップ上のマウスイベントと同期させる場合に指定します。
`autoPanOnFocus`	Boolean	true	マーカーがフォーカスされているときはいつでも（キーボードの `tab` キーを押すなどして）マップがパンし、マーカーがマップの境界内に表示されるようにします。

markerのポップアップ

markerをクリックした時に、ポップアップ画面にタイトルや写真を表示させます。

１．写真オブジェクトを作成

var _pic = "東京都庁<img src='./sample4.png' width='100'>";

２．ポップアップオブジェクトを作成

var _pop = L.popup({maxWidth: 100}).setContent(_pic);

３．markerオブジェクトを作成

var _marker = L.marker([35.689501,139.691722], {title: "東京都庁"}).bindPopup(_pop);

４．地図に追加

_marker.addTo(_map);

全体コード

<html lang="ja">
<head>
 <title>Leafletのマーカーの表示</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>

<div id="map" style="width:100%;height:100%"></div>
<script>
  //表示位置を設定
  var _map = L.map('map');
  //初期表示時に中心座標とズームレベルを設定
  _map.setView([35.6895, 139.69172], 10);
  //初期表示時の表示地図を設定
  L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
      attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
  }).addTo(_map);
  //東京都庁のマーカー
  var _pic = "東京都庁<img src='./sample4.png' width='100'>";
  var _pop = L.popup({maxWidth: 100}).setContent(_pic);
  L.marker([35.689501,139.691722], {title: "東京都庁"}).bindPopup(_pop).addTo(_map);
</script>
</body>
</html>

サンプルを別画面で実行