{"id":252,"date":"2025-10-12T21:55:05","date_gmt":"2025-10-12T12:55:05","guid":{"rendered":"https:\/\/cocorone-asset.com\/?p=252"},"modified":"2025-10-12T21:55:06","modified_gmt":"2025-10-12T12:55:06","slug":"%e7%9f%b3%e5%b1%b1%e7%94%ba%ef%bd%8d%ef%bd%81%ef%bd%90","status":"publish","type":"post","link":"https:\/\/cocorone-asset.com\/?p=252","title":{"rendered":"\u77f3\u5c71\u753a\uff2d\uff21\uff30"},"content":{"rendered":"<p><!DOCTYPE html><br \/>\n<html lang=\"ja\"><br \/>\n<head><br \/>\n  <meta charset=\"utf-8\" \/><br \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><br \/>\n  <title>\u77f3\u5c71\u753a\u30fb\u5468\u8fba\u5229\u4fbf\u30de\u30c3\u30d7\uff08\u8a66\u4f5c\uff09<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/{s}.tile.openstreetmap.org\">\n  <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n  <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script><\/p>\n<style>\n    html, body {height:100%; margin:0;}\n    body {font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Noto Sans JP\", sans-serif;}\n    .wrap {display:flex; flex-direction:column; height:100%;}\n    header {padding:10px 14px; box-shadow: 0 1px 0 rgba(0,0,0,.06);}\n    header h1 {font-size:18px; margin:6px 0 0;}\n    header p {margin:4px 0 0; color:#667085; font-size:12px;}\n    #map {flex: 1 1 auto;}\n    .panel {position: fixed; left: 10px; top: 74px; z-index: 1000; background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: 12px; width: min(86vw, 360px);}\n    .panel h3 {margin: 6px 0 8px; font-size: 14px;}\n    .item {display:flex; align-items:flex-start; gap:8px; padding:6px 0; border-top:1px solid #f2f4f7;}\n    .item:first-of-type {border-top:0}\n    .type {font-size:11px; color:#475467; background:#f2f4f7; border-radius:999px; padding:2px 8px;}\n    .name {font-weight:600; font-size:14px;}\n    .dist {font-size:12px; color:#667085;}\n    .legend {display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}\n    .legend span {display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#475467;}\n    .legend i {display:inline-block; width:12px; height:12px; border-radius:50%}\n    .footer {position: fixed; right: 10px; bottom: 10px; z-index: 1000; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: 8px 12px; font-size: 12px; color:#667085}\n    @media (min-width: 900px){ .panel{top:90px}}\n  <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"wrap\">\n<header>\n<div class=\"type\">\u8a66\u4f5c\u30fb\u30b9\u30de\u30db\u5411\u3051<\/div>\n<h1>\u5c0f\u6a3d\u5e02 \u77f3\u5c71\u753a\uff5c\u5468\u8fba\u5229\u4fbf\u30de\u30c3\u30d7<\/h1>\n<p>\u7269\u4ef6\uff08\u4eee\uff09\u3092\u4e2d\u5fc3\u306b\u3001\u5546\u696d\u65bd\u8a2d\u3068\u99c5\u306e\u4f4d\u7f6e\u95a2\u4fc2\u3092\u53ef\u8996\u5316\u3057\u307e\u3057\u305f\u3002\u8ddd\u96e2\u306f\u76f4\u7dda\u8ddd\u96e2\u306e\u76ee\u5b89\u3067\u3059\u3002<\/p>\n<\/header>\n<div id=\"map\"><\/div>\n<aside class=\"panel\">\n<h3>\u5468\u8fba\u30b9\u30dd\u30c3\u30c8\uff08\u8ddd\u96e2\u306e\u76ee\u5b89\uff09<\/h3>\n<div id=\"list\"><\/div>\n<div class=\"legend\">\n      <span><i style=\"background:#d92d20\"><\/i> \u7269\u4ef6\uff08\u4eee\uff09<\/span><br \/>\n      <span><i style=\"background:#1570ef\"><\/i> \u30b9\u30fc\u30d1\u30fc<\/span><br \/>\n      <span><i style=\"background:#12b76a\"><\/i> \u30b3\u30f3\u30d3\u30cb<\/span><br \/>\n      <span><i style=\"background:#7a5af8\"><\/i> \u99c5<\/span>\n    <\/div>\n<\/aside>\n<div class=\"footer\">\u00a9 \u5730\u56f3\u30bf\u30a4\u30eb: \u00a9 OpenStreetMap contributors<\/div>\n<\/div>\n<p><script>\n  \/\/ \u7269\u4ef6\u306e\u4eee\u4e2d\u5fc3\uff08\u77f3\u5c71\u753a\u4ed8\u8fd1\u306e\u91cd\u5fc3\uff09- \u53c2\u8003: MapFan\n  const property = { name: '\u7269\u4ef6\uff08\u4eee\u30fb\u77f3\u5c71\u753a\u4e2d\u5fc3\uff09', lat: 43.208253, lng: 140.987791, type:'property'};<\/p>\n<p>  \/\/ \u65bd\u8a2d\uff08\u53c2\u8003\u5ea7\u6a19: \u516c\u958b\u30b5\u30a4\u30c8\u60c5\u5831\u3092\u5143\u306b\u8a66\u4f5c\u5024\uff09\n  const spots = [\n    {name: '\u696d\u52d9\u30b9\u30fc\u30d1\u30fc \u5c0f\u6a3d\u5e97', lat: 43.2029764, lng: 140.994156, type: 'super', note: '9:00-21:00 \u4f4f\u6240:\u7a32\u7a425-10-1'},\n    {name: '\u30de\u30c3\u30af\u30b9\u30d0\u30ea\u30e5 \u624b\u5bae\u5e97', lat: 43.20959519, lng: 140.9999829, type: 'super', note: '24\u6642\u9593 \u4f4f\u6240:\u624b\u5bae1-2-1'},\n    {name: '\u30bb\u30a4\u30b3\u30fc\u30de\u30fc\u30c8 \u5c0f\u6a3d\u77f3\u5c71\u5e97', lat: 43.2096, lng: 140.9879, type: 'cvs', note: '7:00-22:00 \u4f4f\u6240:\u77f3\u5c71\u753a35-13 \u203b\u8fd1\u508d\u63a8\u5b9a'},\n    {name: '\u5c0f\u6a3d\u99c5\uff08JR\u51fd\u9928\u672c\u7dda\uff09', lat: 43.197556, lng: 140.993861, type: 'station', note: '\u7a32\u7a422-22-15'}\n  ];<\/p>\n<p>  \/\/ \u30de\u30c3\u30d7\n  const map = L.map('map', {zoomControl:false}).setView([property.lat, property.lng], 14);\n  L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {maxZoom: 19, attribution: ''}).addTo(map);\n  L.control.zoom({position:'bottomright'}).addTo(map);<\/p>\n<p>  \/\/ \u30ec\u30a4\u30e4\u30fc\n  const layers = {\n    property: L.layerGroup().addTo(map),\n    super: L.layerGroup().addTo(map),\n    cvs: L.layerGroup().addTo(map),\n    station: L.layerGroup().addTo(map)\n  };<\/p>\n<p>  function icon(color){\n    return L.divIcon({\n      className: 'custom-pin',\n      html: `<\/p>\n<div style=\"background:${color}; width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2)\"><\/div>\n<p>`,\n      iconSize:[16,16], iconAnchor:[8,8]\n    });\n  }<\/p>\n<p>  const colors = {property:'#d92d20', super:'#1570ef', cvs:'#12b76a', station:'#7a5af8'};<\/p>\n<p>  \/\/ \u7269\u4ef6\u30d4\u30f3\n  L.marker([property.lat, property.lng], {icon: icon(colors.property)}).addTo(layers.property)\n    .bindPopup(`<b>${property.name}<\/b><br \/>\u77f3\u5c71\u753a\u30a8\u30ea\u30a2\uff08\u4e2d\u5fc3\u70b9\uff09`);<\/p>\n<p>  \/\/ \u65bd\u8a2d\u30d4\u30f3\u3068\u30ea\u30b9\u30c8\n  function haversine(lat1,lng1,lat2,lng2){\n    const toRad = d=>d*Math.PI\/180; const R=6371000;\n    const dLat=toRad(lat2-lat1), dLng=toRad(lng2-lng1);\n    const a=Math.sin(dLat\/2)**2+Math.cos(toRad(lat1))*Math.cos(toRad(lat2))*Math.sin(dLng\/2)**2;\n    return 2*R*Math.atan2(Math.sqrt(a), Math.sqrt(1-a));\n  }<\/p>\n<p>  const withDist = spots.map(s=> ({...s, dist: haversine(property.lat, property.lng, s.lat, s.lng)}));\n  withDist.forEach(s=>{\n    L.marker([s.lat, s.lng], {icon: icon(colors[s.type])})\n      .addTo(layers[s.type])\n      .bindPopup(`<b>${s.name}<\/b><br \/>${s.note}<br \/>\u7269\u4ef6\uff08\u4eee\uff09\u304b\u3089\u76f4\u7dda\u7d04 ${(s.dist\/1000).toFixed(2)} km`);\n  });<\/p>\n<p>  \/\/ \u30b5\u30a4\u30c9\u30ea\u30b9\u30c8\n  const list = document.getElementById('list');\n  withDist.sort((a,b)=>a.dist-b.dist).forEach(s=>{\n    const km = (s.dist\/1000);\n    const div = document.createElement('div');\n    div.className = 'item';\n    div.innerHTML = `<\/p>\n<div style=\"width:12px; height:12px; border-radius:50%; background:${colors[s.type]}; margin-top:6px\"><\/div>\n<div>\n<div class=\"name\">${s.name}<\/div>\n<div class=\"dist\">\u7269\u4ef6\uff08\u4eee\uff09\u304b\u3089\u76f4\u7dda\u7d04 ${km<1 ? Math.round(km*1000)+ ' m' : km.toFixed(2)+' km'}<\/div>\n<div style=\"font-size:12px; color:#475467\">${s.note}<\/div>\n<\/p><\/div>\n<p>    `;\n    list.appendChild(div);\n  });<\/p>\n<p>  \/\/ \u8868\u793a\u5207\u66ff\uff08\u9577\u62bc\u3057\u3067\u89e3\u9664\uff09\n  const overlays = { '\u30b9\u30fc\u30d1\u30fc': layers.super, '\u30b3\u30f3\u30d3\u30cb': layers.cvs, '\u99c5': layers.station };\n  L.control.layers({}, overlays, {collapsed:true, position:'topright'}).addTo(map);\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u77f3\u5c71\u753a\u30fb\u5468\u8fba\u5229\u4fbf\u30de\u30c3\u30d7\uff08\u8a66\u4f5c\uff09 \u8a66\u4f5c\u30fb\u30b9\u30de\u30db\u5411\u3051 \u5c0f\u6a3d\u5e02 \u77f3\u5c71\u753a\uff5c\u5468\u8fba\u5229\u4fbf\u30de\u30c3\u30d7 \u7269\u4ef6\uff08\u4eee\uff09\u3092\u4e2d\u5fc3\u306b\u3001\u5546\u696d\u65bd\u8a2d\u3068\u99c5\u306e\u4f4d\u7f6e\u95a2\u4fc2\u3092\u53ef\u8996\u5316\u3057\u307e\u3057\u305f\u3002\u8ddd\u96e2\u306f\u76f4\u7dda\u8ddd\u96e2\u306e\u76ee\u5b89\u3067\u3059\u3002 \u5468\u8fba\u30b9\u30dd\u30c3\u30c8\uff08\u8ddd\u96e2\u306e\u76ee\u5b89\uff09 \u7269\u4ef6\uff08\u4eee\uff09 \u30b9\u30fc\u30d1\u30fc  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"vkexunit_cta_each_option":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-252","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=252"}],"version-history":[{"count":1,"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":253,"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=\/wp\/v2\/posts\/252\/revisions\/253"}],"wp:attachment":[{"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cocorone-asset.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}