ソースファイルを表示

sample/sample_crs_click.htm

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" /> <title>Leaflet 平面図の座標系での座標値の取得</title> <link rel="stylesheet" href="js/leaflet.css" /> <script src="js/leaflet.js"></script> <style type="text/css"> #map_container {     background: #fff7e7;     position:absolute;     top:0; left:0; right:0; bottom:0;     cursor: default; } #btn_container {     position:absolute;     left:12px; bottom:12px;     z-index: 1000; } </style> <script type="text/javascript" charset="UTF-8"> var map; // leaflet地図 var bound; // 表示領域（全体表示で表示される範囲） var mark = null; // マーカ（クリックした位置を表示） function init() { // 初期処理     map = L.map('map_container', {crs: L.CRS.Simple, minZoom: 5, maxZoom: 12, zoomControl: false});     L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御     map.on('click', mapClick);     bound = L.latLngBounds([-1.396, -3.266], [5.699, 8.133]); // 表示領域の設定     map.fitBounds(bound);     L.imageOverlay('img/plan01.png', bound).addTo(map); // 背景画像の表示 } function m2mm(val) { // mをmmに変換     return Math.round(val * 1000); } function mapClick(e) { // クリック時の処理     if (mark == null) mark = L.marker(e.latlng).addTo(map).bindPopup();     else mark.setLatLng(e.latlng);     mark.on('click', markClick) mark.getPopup().setContent(m2mm(e.latlng.lng) + ', ' + m2mm(e.latlng.lat));     mark.openPopup(); // ポップアップで座標値を表示 } function markClick(e) { // マーカクリック時の処理     mark.remove(); // マーカを削除     mark = null; } </script> </head> <body onload="init()"> <div id="map_container"></div> <div id="btn_container">     <input type="button" onclick="map.fitBounds(bound)" value="全体表示" /> </div> </body> </html>