{"id":5686,"date":"2024-06-02T11:42:21","date_gmt":"2024-06-02T02:42:21","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=5686"},"modified":"2024-06-02T12:17:14","modified_gmt":"2024-06-02T03:17:14","slug":"post-5686","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/5686","title":{"rendered":"Leaflet\u3067\u300cleaflet-locatecontrol\u300d\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u5c0e\u5165\u3057\u3066\u73fe\u5728\u5730\u8868\u793a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

Leaflet\u3068OpenStreetMap\u3067\u30de\u30c3\u30d7\u8868\u793a\u3055\u305b\u3001\u7279\u5b9a\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u73fe\u5728\u5730\u3092\u8868\u793a\u3057\u5c1a\u4e14\u3064\u30de\u30fc\u30ab\u30fc\u3092\u8a2d\u7f6e\u3057\u305f\u3044\u3002\u300cleaflet-locatecontrol\u300d\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u5c0e\u5165\u3059\u308b\u3053\u3068\u3067\u5b9f\u88c5\u3067\u304d\u305f\u3002\u5c1a\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30a2\u30a4\u30b3\u30f3\u306f\u5fae\u5999\u3060\u3063\u305f\u306e\u3067Font Awesome\u306e\u30a2\u30a4\u30b3\u30f3\u306b\u5909\u66f4\u3059\u308b\u65b9\u6cd5\u3082\u3042\u308f\u305b\u3066\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

leaflet-locatecontrol<\/h2>\n

GitHub<\/h3>\n

https:\/\/github.com\/domoritz\/leaflet-locatecontrol<\/a><\/p>\n

\u30c7\u30e2\u30da\u30fc\u30b8<\/h3>\n

https:\/\/domoritz.github.io\/leaflet-locatecontrol\/demo\/<\/a><\/p>\n

CDN<\/h3>\n

CDN\u3067\u4f7f\u3046\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-locatecontrol\/0.79.0\/L.Control.Locate.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-locatecontrol\/0.79.0\/L.Control.Locate.css\"><\/pre>\n
 <\/p>\n
Font Awesome<\/h2>\n
\u516c\u5f0f\u30b5\u30a4\u30c8<\/h3>\n
https:\/\/fontawesome.com\/<\/a><\/p>\n
\u30a2\u30a4\u30b3\u30f3\u30da\u30fc\u30b8<\/h3>\n
https:\/\/fontawesome.com\/icons<\/a><\/p>\n
CDN<\/h3>\n
CDN\u3067\u4f7f\u3046\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"><\/pre>\n
 <\/p>\n
\u30b5\u30f3\u30d7\u30eb<\/h2>\n
https:\/\/taitan916.info\/sample\/leaflet.js\/plugin\/leaflet-locatecontrol\/<\/a><\/p>\n
\u30de\u30c3\u30d7\u5de6\u4e0a\u306e\u300c+\u300d\u300c-\u300d\u30dc\u30bf\u30f3\u4e0b\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u73fe\u5728\u5730\u304c\u8868\u793a\u3055\u308c\u308b\u7b48\u3002<\/p>\n
 <\/p>\n
\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n
<html lang=\"ja\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n<title>Leaflet\u3067\u300cleaflet-locatecontrol\u300d\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u5c0e\u5165\u3057\u3066\u73fe\u5728\u5730\u8868\u793a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u30b5\u30f3\u30d7\u30eb<\/title>\r\n<style>\r\nhtml, body, #map {\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n.leaflet-control-locate a.leaflet-bar-part span {\r\n    font-size: 1rem;\r\n    line-height: unset;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <div id=\"map\"><\/div>\r\n\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.css\"\/>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-locatecontrol\/0.79.0\/L.Control.Locate.min.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-locatecontrol\/0.79.0\/L.Control.Locate.css\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n    <script>\r\n    let map;\r\n    map = L.map('map');\r\n\r\n    \/\/\u4e2d\u5fc3\u306e\u7d4c\u5ea6\u7def\u5ea6\r\n    const center = ['35.681236', '139.767125'];\r\n\r\n    \/\/\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\r\n    const zoom = 12;\r\n\r\n    \/\/\u30de\u30c3\u30d7\u306e\u4e2d\u5fc3\u5730\u3068\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\u3092\u6307\u5b9a\r\n    map.setView(center, zoom);\r\n\r\n    const tileLayer = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{\r\n        attribution: '\u00a9 <a href=\"http:\/\/osm.org\/copyright\">OpenStreetMap<\/a> contributors',\r\n        maxZoom: 19\r\n    });\r\n    tileLayer.addTo(map);\r\n\r\n    \/\/\u73fe\u5728\u5730\u8868\u793a\r\n    const option = {\r\n        position: 'topleft',\r\n        icon: 'fa-solid fa-location-dot',\r\n        strings: {\r\n            title: \"\u73fe\u5728\u5730\u3092\u8868\u793a\",\r\n            popup: \"\u73fe\u5728\u5730\"\r\n        },\r\n        locateOptions: {\r\n            maxZoom: 16\r\n        }\r\n    }\r\n    const lc = L.control.locate(option).addTo(map);\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Leaflet\u3068OpenStreetMap\u3067\u30de\u30c3\u30d7\u8868\u793a\u3055\u305b\u3001\u7279\u5b9a\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea ... <\/p>\n","protected":false},"author":1,"featured_media":5571,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[101],"class_list":["post-5686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-leaflet"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/5686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=5686"}],"version-history":[{"count":4,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/5686\/revisions"}],"predecessor-version":[{"id":5691,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/5686\/revisions\/5691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/5571"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=5686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=5686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=5686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}