ソースファイルを表示

sample/sample_marker_circle.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 {     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 placeList = [{ // マーカデータの定義     'name':'兼六園', 'addr':'石川県金沢市兼六町',     'coord':{'lat':36.562214, 'lng':136.662544},     'photo':'<img src="img/kenrokuen.jpg" width="180" height="120" />' },{     'name':'後楽園', 'addr':'岡山県岡山市北区後楽園',     'coord':{'lat':34.667849, 'lng':133.934932},     'photo':'<img src="img/korakuen.jpg" width="180" height="120" />' },{     'name':'偕楽園', 'addr':'茨城県水戸市常磐町1丁目',     'coord':{'lat':36.374166, 'lng':140.452557},     'photo':'<img src="img/kairakuen.jpg" width="180" height="120" />' }]; var map; // leaflet地図 var bound; // 表示領域(全体表示で表示される範囲) function init() {     map = L.map('map_container', { zoomControl: false });     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); // 地理院地図を表示     L.control.scale({imperial:false, position:'bottomright'}).addTo(map); // 目盛表示     L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御     let grp = L.layerGroup(); // マーカ表示用レイヤグループ     map.addLayer(grp);     let latLng = L.latLng(placeList[0].coord.lat, placeList[0].coord.lng); bound = L.latLngBounds(latLng, latLng);     for (let i = 0; i < placeList.length; i++) { // マーカを登録         let place = placeList[i];         latLng = L.latLng(place.coord.lat, place.coord.lng);         bound.extend(latLng);         let str = place.name + '<br>\n' + place.addr + '<br>\n';         if (typeof(place.photo) != 'undefined') str += place.photo;         let popup = L.popup().setContent(str);         L.circleMarker(latLng, {             title: place.name,             color: '#0000cc',             radius: 10,             opacity: 1.0,             fillOpacity: 0.3         }).bindPopup(popup).addTo(grp);     }     map.fitBounds(bound); // マーカ全体の範囲を表示 } </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>