{"id":11874,"date":"2023-08-20T07:00:48","date_gmt":"2023-08-19T22:00:48","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=11874"},"modified":"2023-08-05T02:35:44","modified_gmt":"2023-08-04T17:35:44","slug":"%e5%86%99%e7%9c%9f%e3%81%a8%e5%9c%b0%e5%9b%b3%e3%81%8c%e4%b8%80%e4%bd%93%e5%8c%96%ef%bc%81laravel%e3%81%a8leaflet%e3%81%a7%e3%83%89%e3%83%a9%e3%83%83%e3%82%b0%e3%83%89%e3%83%ad%e3%83%83%e3%83%97","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=11874","title":{"rendered":"\u5199\u771f\u3068\u5730\u56f3\u304c\u4e00\u4f53\u5316\uff01Laravel\u3068Leaflet\u3067\u30c9\u30e9\u30c3\u30b0&\u30c9\u30ed\u30c3\u30d7\u4fdd\u5b58\u306e\u5b9f\u73fe\u65b9\u6cd5"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u4eca\u5e74\u3082\u6691\u3044\u590f\u304c\u3084\u3063\u3066\u304d\u305f\u306e\u3067\u3001\u307e\u305f\u3057\u3066\u3082\u300c\u81ea\u7531\u7814\u7a76<\/strong>\u300d\u7684\u306a\u6c17\u5206\u306b\u306a\u3063\u3066\u3044\u308b\u4eca\u65e5\u3053\u306e\u9803\u3067\u3059\u3002<\/p>\n

\u305d\u3057\u3066\u3001\u305d\u3093\u306a\u3068\u304d\u306b\u3042\u308b\u300c\u3084\u3063\u3066\u307f\u305f\u3044\u3053\u3068<\/strong>\u300d\u304c\u5929\u304b\u3089\u964d\u3063\u3066\u304d\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u308c\u306f\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n

\u5730\u56f3\u4e0a\u306b\u5199\u771f\u3092\u30c9\u30e9\u30c3\u30b0\u30fb\u30a2\u30f3\u30c9\u30fb\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3068\u3001\u305d\u3053\u306b\u753b\u50cf\u3092\u4fdd\u5b58\u3067\u304d\u308b<\/strong><\/p>\n

\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n

\u3053\u308c\u306f\u3001\u5b9f\u969b\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u306e\u306fLaravel<\/code>\u306e\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u3059\u304c\u3001\u4f4d\u7f6e\u60c5\u5831\u3092\u4e00\u7dd2\u306bDB\u306b\u4fdd\u5b58\u3059\u308b\u3053\u3068\u3067\u5730\u56f3\u306e\u4e0a\u304b\u3089\u5199\u771f\u3092\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f\u304b\u3063\u305f\u3093\u3067\u3059\u306d\u3002<\/p>\n

\u3068\u3044\u3046\u306e\u3082\u3001\u79c1\u306f\u3044\u308d\u3044\u308d\u3068\u51fa\u304b\u3051\u3066\u306f\u8a2a\u554f\u5148\u306e\u300cB\u7d1a\u30b9\u30dd\u30c3\u30c8<\/strong>\u300d\u306e\u5199\u771f\u3092\u3068\u308b\u306e\u304c\u597d\u304d\u306a\u3093\u3067\u3059\u304c\u3001\u3042\u307e\u308a\u306b\u305f\u304f\u3055\u3093\u884c\u304d\u904e\u304e\u3066\u300c\u3042\u308c\u3001\u3042\u306e\u5199\u771f\u3069\u3053\u3044\u3063\u305f\u3063\u3051\u2026\ud83d\ude05\u300d\u3068\u306a\u308b\u3053\u3068\u304c\u591a\u3044\u304b\u3089\u306a\u3093\u3067\u3059\u306d\u3002<\/p>\n

\u305d\u3053\u3067\u2757<\/p>\n

\u4eca\u56de\u306f\u300cLaravel + Leaflet<\/strong>\u300d\u3067\u5199\u771f\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fdd\u5b58\u3067\u304d\u308b\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u305c\u3072\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308a\u307e\u3057\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\u3002\ud83d\ude04\u2728<\/p>\n

\"\"\u300c\u3053\u306e\u9593\u306f\u7247\u9053\uff15\u6642\u9593
\n\u96fb\u8eca\u306b\u4e57\u308a\u3063\u3071\u306a\u3057
\n\u3067\u3057\u305f\u3002\u8170\u304c\u2026\u300d<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> Laravel 10.x\u3001Alpine.js 3.12\u3001Axios 1.4.0\u3001leaflet 1.9.4<\/p>\n

DB\u307e\u308f\u308a\u3092\u6e96\u5099\u3059\u308b\uff08\u30e2\u30c7\u30eb\uff06\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\uff09<\/h1>\n

\u3067\u306f\u3001\u307e\u305a\u306f\u3058\u3081\u306bDB\u306e\u65b9\u304b\u3089\u6e96\u5099\u3092\u9032\u3081\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

php artisan make:model MapPhoto -m<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001\u30e2\u30c7\u30eb\u3068\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304c\u4e00\u6c17\u306b\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
app\/Models\/MapPhoto.php<\/strong><\/p>\n
<?php\r\n\r\nnamespace App\\Models;\r\n\r\nuse App\\Events\\MapPhotoDeleted;\r\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\r\nuse Illuminate\\Database\\Eloquent\\Model;\r\n\r\nclass MapPhoto extends Model\r\n{\r\n    use HasFactory;\r\n\r\n    protected $appends = [\r\n        'file_path',\r\n    ];\r\n    protected $dispatchesEvents = [\r\n        'deleted' => MapPhotoDeleted::class,\r\n    ];\r\n\r\n    \/\/ Accessor\r\n    public function getFilePathAttribute()\r\n    {\r\n        return storage_path('app\/public\/map_photos\/' . $this->filename);\r\n    }\r\n}\r\n<\/strong><\/pre>\n
database\/migrations\/****_**_**_******_create_map_photos_table.php<\/strong><\/p>\n
\/\/ \u7701\u7565\r\n\r\npublic function up(): void\r\n{\r\n    Schema::create('map_photos', function (Blueprint $table) {\r\n        $table->id();\r\n        $table->string('filename')->comment('\u30d5\u30a1\u30a4\u30eb\u540d');\r\n        $table->string('original_filename')->comment('\u30d5\u30a1\u30a4\u30eb\u540d');\r\n        $table->double('latitude', 9, 6)->comment('\u7def\u5ea6');\r\n        $table->double('longitude', 9, 6)->comment('\u7d4c\u5ea6');\r\n        $table->timestamps();\r\n    });<\/strong>\r\n}\r\n\r\n\/\/ \u7701\u7565\r\n<\/pre>\n
\u3067\u306f\u3001\u3053\u306e\u72b6\u614b\u3067\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u521d\u671f\u5316\u3057\u307e\u3057\u3087\u3046\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
php artisan migrate:fresh --seed\r\n<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001\u5b9f\u969b\u306e\u30c6\u30fc\u30d6\u30eb\u306f\u3053\u3046\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\"\"<\/p>\n
\u524a\u9664\u30a4\u30d9\u30f3\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u5148\u307b\u3069MapPhoto<\/code>\u30e2\u30c7\u30eb\u3092\u3064\u304f\u308a\u307e\u3057\u305f\u304c\u3001\u3082\u3057\u30c7\u30fc\u30bf\u304c\u524a\u9664\u3055\u308c\u305f\u3068\u304d\u306b\u300c\u81ea\u52d5\u7684\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664<\/strong>\u300d\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u3053\u3093\u306a\u3068\u304d\u306f\u3001Laravel<\/code>\u306e\u300c\u30a4\u30d9\u30f3\u30c8<\/strong>\u300d\u3092\u4f7f\u3044\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u30a4\u30d9\u30f3\u30c8\u30fb\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
php artisan make:event MapPhotoDeleted\r\n<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
app\/Events\/MapPhotoDeleted.php<\/strong><\/p>\n
\/\/ \u7701\u7565\r\n\r\npublic function __construct(MapPhoto $map_photo)\r\n{\r\n    $file_path = $map_photo->file_path;\r\n\r\n    if(file_exists($file_path)) {\r\n\r\n        @unlink($file_path); \/\/ \u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664\r\n\r\n    }\r\n}<\/strong>\r\n\r\n\/\/ \u7701\u7565<\/pre>\n
\u306a\u304a\u3001\u3053\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u30bb\u30c3\u30c8\u3057\u305f\u90e8\u5206\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
app\/Models\/MapPhoto.php<\/strong><\/p>\n
protected $dispatchesEvents = [\r\n    'deleted' => MapPhotoDeleted::class,\r\n];\r\n<\/strong><\/pre>\n
\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u7d9a\u3044\u3066\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u3059\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
php artisan make:controller MapPhotoController\r\n<\/strong><\/pre>\n
\u3059\u308b\u3068\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30fb\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u6b21\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
app\/Http\/Controllers\/MapPhotoController.php<\/strong><\/p>\n
<?php\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse App\\Models\\MapPhoto;\r\nuse Illuminate\\Http\\Request;\r\n\r\nclass MapPhotoController extends Controller\r\n{\r\n    public function index()\r\n    {\r\n        return view('map_photo.index');\r\n    }\r\n\r\n    public function list(Request $request)\r\n    {\r\n        $max_latitude = $request->north;\r\n        $min_latitude = $request->south;\r\n        $max_longitude = $request->east;\r\n        $min_longitude = $request->west;\r\n\r\n        return MapPhoto::query() \/\/ \u672c\u6765\u306f API Resource \u3092\u4f7f\u3046\u3079\u304d\u3067\u3059\u304c\u3001\u4eca\u56de\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059\r\n            ->where('latitude', '<=', $max_latitude)\r\n            ->where('latitude', '>=', $min_latitude)\r\n            ->where('longitude', '<=', $max_longitude)\r\n            ->where('longitude', '>=', $min_longitude)\r\n            ->get();\r\n    }\r\n\r\n    public function image(MapPhoto $map_photo)\r\n    {\r\n        return response()->file($map_photo->file_path);\r\n    }\r\n\r\n    public function store(Request $request)\r\n    {\r\n        \/\/ \u6ce8\uff1a \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059\r\n\r\n        $result = false;\r\n\r\n        if($request->hasFile('photo')) {\r\n\r\n            $file = $request->photo;\r\n            $path = $file->store('public\/map_photos');\r\n            $filename = basename($path);\r\n            $original_filename = $file->getClientOriginalName();\r\n\r\n            $map_photo = new MapPhoto();\r\n            $map_photo->filename = $filename;\r\n            $map_photo->original_filename = $original_filename;\r\n            $map_photo->latitude = $request->latitude;\r\n            $map_photo->longitude = $request->longitude;\r\n            $result = $map_photo->save();\r\n\r\n        }\r\n\r\n        return ['result' => $result];\r\n    }\r\n\r\n    public function destroy(MapPhoto $map_photo)\r\n    {\r\n        \/\/ \u6ce8\uff1a \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059\r\n\r\n        $result = $map_photo->delete();\r\n\r\n        return ['result' => $result];\r\n    }\r\n}<\/strong><\/pre>\n
\u203b \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u3044\u308b\u306e\u3067\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u5185\u3067\u6307\u5b9a\u3057\u305f\u30d3\u30e5\u30fc\u30fb\u30d5\u30a1\u30a4\u30eb\u3092\u3064\u304f\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002
\n\u3053\u3053\u304c\u4eca\u56de\u3067\u4e00\u756a\u8907\u96d1\u306a\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n
resources\/views\/map_photo\/index.blade.php<\/strong><\/p>\n
<html>\r\n    <head>\r\n        <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.12.1\/dist\/cdn.min.js\"><\/script>\r\n        <script src=\"https:\/\/cdn.tailwindcss.com\/3.3.2\"><\/script>\r\n        <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.4.0\/axios.min.js\"><\/script>\r\n        <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n        <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\">\r\n    <\/head>\r\n    <body>\r\n        <div x-data=\"mapPhoto\">\r\n            <div class=\"relative\">\r\n                <div id=\"map\" class=\"h-full\"><\/div>\r\n                <div class=\"absolute text-center top-2 left-0 right-0\" style=\"z-index:1000;\">\r\n                    <span class=\"bg-gray-100 px-4 py-1 text-2xl\">\u30c9\u30e9\u30c3\u30b0\u30a2\u30f3\u30c9\u30c9\u30ed\u30c3\u30d7\u3067\u5730\u56f3\u306b\u5199\u771f\u3092\u4fdd\u5b58\u3059\u308b\u30b5\u30f3\u30d7\u30eb<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <script>\r\n\r\n            const mapPhoto = {\r\n\r\n                \/\/ \u5730\u56f3\r\n                map: null,\r\n                setMarkers(photos) {\r\n\r\n                    photos.forEach(photo => {\r\n\r\n                        const originalFileName = photo.original_filename;\r\n                        const popUpHtml = `<div>\r\n                                <p>${originalFileName}<\/p>\r\n                                <a href=\"\/map_photo\/image\/${photo.id}\" target=\"_blank\">\r\n                                    <img src=\"\/map_photo\/image\/${photo.id}\" class=\"w-32 mx-auto mb-5\">\r\n                                <\/a>\r\n                                <div class=\"text-center\">\r\n                                    <button type=\"button\" class=\"mt-1 px-2 py-1 bg-red-500 text-white\" @click=\"deletePhoto(${photo.id})\">\u5199\u771f\u3092\u524a\u9664<\/button>\r\n                                    <button type=\"button\" class=\"mt-1 px-2 py-1 bg-gray-300 text-black\" @click=\"map.closePopup();\">\u9589\u3058\u308b<\/button>\r\n                                <\/div>\r\n                                <\/div>`;\r\n\r\n                        L.marker([photo.latitude, photo.longitude])\r\n                            .addTo(this.map)\r\n                            .bindPopup(popUpHtml);\r\n\r\n                    });\r\n\r\n                },\r\n                clearAllMarkers() {\r\n\r\n                    this.map.eachLayer(layer => {\r\n\r\n                        if(layer instanceof L.Marker) { \/\/ \u30de\u30fc\u30ab\u30fc\u306e\u307f\u524a\u9664\r\n\r\n                            this.map.removeLayer(layer);\r\n\r\n                        }\r\n\r\n                    });\r\n\r\n                },\r\n                getPhotos() {\r\n\r\n                    const bounds = this.map.getBounds();\r\n                    const northEast = bounds.getNorthEast();\r\n                    const southWest = bounds.getSouthWest();\r\n\r\n                    const url = '\/map_photo\/list';\r\n                    const data = {\r\n                        params: {\r\n                            north: northEast.lat,\r\n                            east: northEast.lng,\r\n                            south: southWest.lat,\r\n                            west: southWest.lng,\r\n                        }\r\n                    };\r\n\r\n                    axios.get(url, data)\r\n                        .then(response => {\r\n\r\n                            this.clearAllMarkers();\r\n\r\n                            const photos = response.data;\r\n                            this.setMarkers(photos);\r\n\r\n                        });\r\n\r\n                },\r\n                initMap() {\r\n\r\n                    const defaultLocation = [35.43745244091463, 135.11052025291264]; \/\/ \u798f\u77e5\u5c71\u306e\u3042\u305f\u308a\r\n                    this.map = L.map('map').setView(defaultLocation, 11);\r\n\r\n                    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n                        attribution: '<a href=\"https:\/\/www.openstreetmap.org\/\">OpenStreetMap<\/a>',\r\n                    }).addTo(this.map);\r\n\r\n                    \/\/ \u5730\u56f3\u304c\u52d5\u3044\u305f\u3089\u30de\u30fc\u30ab\u30fc\u3092\u518d\u53d6\u5f97\u3057\u3066\u8868\u793a\r\n                    this.map.on('moveend', () => this.getPhotos());\r\n                    this.map.on('zoomend', () => this.getPhotos());\r\n\r\n                    const mapElement = document.getElementById('map');\r\n\r\n                    \/\/ \u30c9\u30e9\u30c3\u30b0\u30fb\u30a2\u30f3\u30c9\u30fb\u30c9\u30ed\u30c3\u30d7\u306e\u30a4\u30d9\u30f3\u30c8\r\n                    mapElement.addEventListener('dragover', e => {\r\n\r\n                        e.preventDefault();\r\n\r\n                    });\r\n                    mapElement.addEventListener('drop', e => {\r\n\r\n                        e.preventDefault();\r\n                        this.savePhoto(e);\r\n\r\n                    });\r\n\r\n                    \/\/ \u521d\u671f\u8868\u793a\u6642\u306b\u30de\u30fc\u30ab\u30fc\u3092\u53d6\u5f97\u3057\u3066\u8868\u793a\r\n                    this.getPhotos();\r\n\r\n                },\r\n\r\n                \/\/ \u5199\u771f\u306e\u4fdd\u5b58\u30fb\u524a\u9664\r\n                getLocationFromMousePosition(x, y) {\r\n\r\n                    const pointXY = L.point(x, y);\r\n                    const location = this.map.containerPointToLatLng(pointXY);\r\n\r\n                    return {\r\n                        latitude: location.lat,\r\n                        longitude: location.lng,\r\n                    };\r\n\r\n                },\r\n                savePhoto(e) {\r\n\r\n                    const files = e.dataTransfer.files;\r\n\r\n                    if (files.length > 0) {\r\n\r\n                        const file = files[0];\r\n                        const location = this.getLocationFromMousePosition(e.clientX, e.clientY);\r\n\r\n                        const url = '\/map_photo';\r\n                        const formData = new FormData();\r\n                        formData.append('photo', file);\r\n                        formData.append('latitude', location.latitude);\r\n                        formData.append('longitude', location.longitude);\r\n\r\n                        axios.post(url, formData)\r\n                            .then(response => {\r\n\r\n                                if(response.data.result === true) {\r\n\r\n                                    this.getPhotos();\r\n\r\n                                }\r\n\r\n                            });\r\n\r\n                    }\r\n\r\n                },\r\n                deletePhoto(photoId) {\r\n\r\n                    if(confirm('\u5199\u771f\u3092\u524a\u9664\u3057\u307e\u3059\u304b\uff1f')) {\r\n\r\n                        const url = `\/map_photo\/${photoId}`;\r\n\r\n                        axios.delete(url)\r\n                            .then(response => {\r\n\r\n                                if(response.data.result === true) {\r\n\r\n                                    this.getPhotos();\r\n\r\n                                }\r\n\r\n                            });\r\n\r\n                    }\r\n\r\n                },\r\n\r\n                \/\/ \u521d\u671f\u5316\r\n                init() {\r\n\r\n                    this.initMap();\r\n\r\n                }\r\n\r\n            };\r\n\r\n        <\/script>\r\n\r\n    <\/body>\r\n<\/html><\/strong><\/pre>\n
\u57fa\u672c\u7684\u306b\u306fleaflet<\/code>\u306e\u4f7f\u3044\u65b9\u3092Alpine.js<\/code>\u306e\u4e2d\u3067\u5b9f\u884c\u3057\u3066\u3044\u308b\u3060\u3051\u306a\u306e\u3067\u3059\u304c\u3001\u7279\u306b\u91cd\u8981\u306a\u306e\u304c\u3001savePhoto()<\/code>\u306e\u90e8\u5206\u3067\u3059\u3002<\/p>\n
\u3053\u3053\u306f\u3001\u4ee5\u4e0b\u306e\u6d41\u308c\u306e\u3068\u304d\u306b\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<\/p>\n
    \n
  1. \u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0\u30fb\u30a2\u30f3\u30c9\u30fb\u30c9\u30ed\u30c3\u30d7\u3059\u308b<\/li>\n
  2. \u30de\u30a6\u30b9\u306e\u4f4d\u7f6e\u304b\u3089 GPS \u4f4d\u7f6e\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b<\/li>\n
  3. \u30d5\u30a1\u30a4\u30eb\uff06 GPS \u4f4d\u7f6e\u60c5\u5831\u3092 Laravel \u3078\u9001\u4fe1<\/li>\n
  4. \u4fdd\u5b58<\/li>\n<\/ol>\n
    \u305d\u3057\u3066\u3001\u30de\u30a6\u30b9\u4f4d\u7f6e\u304b\u3089\u5730\u56f3\u306e\u4f4d\u7f6e\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b\u306e\u304cgetLocationFromMousePosition()<\/code>\u3067\u3059\u3002<\/p>\n
    \u3053\u306e\u4e2d\u3067\u306f\u3001leaflet<\/code>\u304c\u7528\u610f\u3057\u3066\u304f\u308c\u3066\u3044\u308bcontainerPointToLatLng()<\/code>\u3092\u4f7f\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u9593\u9055\u3063\u3066layerpointtolatlng()<\/code>\u3092\u4f7f\u3063\u3066\u3057\u307e\u3046\u3068\u3001\u5730\u56f3\u3092\u79fb\u52d5\u3057\u305f\u3068\u304d\u306b\u3046\u307e\u304f\u3044\u304b\u306a\u304f\u306a\u3063\u3066\u3057\u307e\u3063\u306630\u5206\u307b\u3069\u6642\u9593\u3092\u7121\u99c4\u306b\u3059\u308b\u306e\u3067\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff08\u2190\u79c1\u3067\u3059\ud83d\ude02\uff09<\/p>\n
    \u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
    \u3067\u306f\u3001\u6700\u671f\u306b\u30eb\u30fc\u30c8\u3067\u3059\u3002
    \n\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    routes\/web.php<\/strong><\/p>\n
    use App\\Http\\Controllers\\MapPhotoController;\r\n\r\n\/\/ \u7701\u7565\r\n\r\nRoute::prefix('map_photo')->controller(MapPhotoController::class)->group(function(){\r\n\r\n    Route::get('\/', 'index')->name('map_photo.index'); \/\/ \u5730\u56f3\u3092\u8868\u793a\r\n    Route::get('\/list', 'list')->name('map_photo.list'); \/\/ \u5199\u771f\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\r\n    Route::get('\/image\/{map_photo}', 'image')->name('map_photo.image'); \/\/ \u5199\u771f\u30c7\u30fc\u30bf\r\n    Route::post('\/', 'store')->name('map_photo.store'); \/\/ \u5199\u771f\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\r\n    Route::delete('\/{map_photo}', 'destroy')->name('map_photo.destroy'); \/\/ \u5199\u771f\u30c7\u30fc\u30bf\u3092\u524a\u9664\r\n\r\n});<\/strong><\/pre>\n
    \u3053\u308c\u3067\u4f5c\u696d\u306f\u5b8c\u4e86\u3067\u3059\u3002
    \n\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\u3002\ud83d\ude04\ud83d\udc4d<\/p>\n
    \u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b<\/h1>\n
    \u3067\u306f\u3001\u5b9f\u969b\u306b\u5199\u771f\u3092\u30c9\u30e9\u30c3\u30b0\u30fb\u30a2\u30f3\u30c9\u30fb\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u5730\u56f3\u4e0a\u306b\u4fdd\u5b58\u3067\u304d\u308b\u304b\u3092\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u2757<\/p>\n
    \u3061\u306a\u307f\u306b\u4eca\u56de\u4f7f\u3046\u306e\u306f\u3001\u79c1\u304c\u3053\u306e\u524d\u884c\u3063\u305f\u798f\u77e5\u5c71\u5468\u8fba\u306e\uff13\u5199\u771f\u3067\u3059\u3002\uff08\u203b \u306a\u306e\u3067\u3001\u4eca\u56de\u5730\u56f3\u306e\u521d\u671f\u4f4d\u7f6e\u306f\u798f\u77e5\u5c71\u3042\u305f\u308a\u306b\u306a\u3063\u3066\u3044\u307e\u3059\uff09<\/p>\n
    \uff11\uff0e\u798f\u77e5\u5c71\u99c5\u306b\u5230\u7740<\/p>\n
    \"\"<\/p>\n
    \uff12\uff0e\u5bae\u6d25\u99c5\u3067\u5f85\u3061\u5408\u308f\u305b\u3057\u3066\u308b\u3068\u304d\u306b\u8cb7\u3063\u305f\u300c\u98f2\u3080\u51b7\u9eba\u300d\uff08\u5473\u306f\u2026\ud83d\ude05\uff09<\/p>\n
    \"\"<\/p>\n
    \uff13\uff0e\u3082\u3061\u308d\u3093\u6700\u671f\u306f\u30af\u30e9\u30d5\u30c8\u30d3\u30fc\u30eb<\/p>\n
    \"\"<\/p>\n
    \u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u300chttps:\/\/******\/map_photo<\/strong>\u300d\u3078\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\u2757
    \n\u5730\u56f3\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002\ud83d\ude04<\/p>\n
    \u3067\u306f\u3001\u307e\u305a\u6700\u521d\u306b\u798f\u77e5\u5c71\u99c5\u306b\u5199\u771f\u3092\u30c9\u30e9\u30c3\u30b0\u30fb\u30a2\u30f3\u30c9\u30fb\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
    \u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\u2757\u30d4\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
    \u3067\u306f\u3001\u3053\u306e\u30d4\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \u3069\u3046\u306a\u308b\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\u2757
    \n\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3082\u3046\u307e\u304f\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
    \u3067\u306f\u3001\u6b8b\u308a\u306e\uff13\u3064\u3082\u767b\u9332\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\u2757
    \n\u8907\u6570\u30de\u30fc\u30ab\u30fc\u3082\u3046\u307e\u304f\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u306d\u3002<\/p>\n
    \u3067\u306f\u3001\u6700\u671f\u306b\uff08\u3061\u3087\u3063\u3068\u3060\u3051\u3046\u30fc\u3093\u2026\u3060\u3063\u305f\uff09\u98f2\u3080\u51b7\u9eba\u306e\u300c\u5199\u771f\u3092\u524a\u9664<\/strong>\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \"\"<\/p>\n
    \u3046\u307e\u304f\u3044\u304f\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\u2757
    \n\u5bae\u6d25\u99c5\u306b\u3042\u3063\u305f\u30c7\u30fc\u30bf\u304c\u6d88\u3048\u307e\u3057\u305f\u3002<\/p>\n
    \u5ff5\u306e\u305f\u3081\u3001\u30b9\u30c8\u30ec\u30fc\u30b8\u30d5\u30a9\u30eb\u30c0\u3082\u30c1\u30a7\u30c3\u30af\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \"\"<\/p>\n
    \u306f\u3044\u2757
    \n\u3053\u3061\u3089\u3082\u30d5\u30a1\u30a4\u30eb\u304c\u524a\u9664\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u3059\u3079\u3066\u6210\u529f\u3067\u3059\ud83d\ude04\u2728<\/p>\n
    \u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848<\/h1>\n
    \u4eca\u56de\u306e\u3088\u3046\u306bLeaflet.js<\/code>\u3092\u5229\u7528\u3059\u308c\u3070\u3001Google<\/code>\u30de\u30c3\u30d7\u3067\u306f\u3067\u304d\u306a\u3044\u3088\u3046\u306a\u3053\u3068\u3092\u5de5\u592b\u6b21\u7b2c\u3067\u3044\u308d\u3044\u308d\u3068\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff08\u203b \u6b63\u78ba\u306b\u306fGoogle<\/code>\u30de\u30c3\u30d7\u3082\u53ef\u80fd\u3067\u3059\u304c\u3001\u6709\u6599\u3067\u3061\u3087\u3063\u3068\u304a\u9ad8\u76ee\u3067\u3059\uff09<\/p>\n
    \u3082\u3057\u3053\u3046\u3044\u3063\u305f\u72ec\u81ea\u6a5f\u80fd\u3092\u5730\u56f3\u306b\u6301\u305f\u305b\u305f\u3044\u5834\u5408\u306f\u305c\u3072\u304a\u554f\u5408\u305b\u304b\u3089\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/p>\n
    \u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\u3002\ud83d\ude04<\/p>\n
    \u304a\u308f\u308a\u306b<\/h1>\n
    \u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306f\u300cLeaflet<\/code>\u3092\u4f7f\u3063\u3066\u30c9\u30e9\u30c3\u30b0\u30fb\u30a2\u30f3\u30c9\u30fb\u30c9\u30ed\u30c3\u30d7\u3057\u305f\u5199\u771f\u3092\u5730\u56f3\u4e0a\u306b\u4fdd\u5b58\u3059\u308b\u300d\u3068\u3044\u3046\u6a5f\u80fd\u3092\u3064\u304f\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
    \u3061\u306a\u307f\u306b\u3001\u300c\u3082\u3057\u3001\u3053\u3093\u306a\u30b5\u30fc\u30d3\u30b9\u304c\u3042\u3063\u305f\u3089\u500b\u4eba\u7684\u306b\u306f\u3046\u308c\u3057\u3044\u306e\u306b\u306a\u2026\ud83e\udd14\u300d\u3068\u3082\u601d\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u6bce\u56de\u5199\u771f\u3092\u5730\u56f3\u4e0a\u306b\u767b\u9332\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3068\u306a\u308b\u3068\u3001\u3081\u3093\u3069\u3046\u304b\u306a\u306a\u3093\u3066\u8003\u3048\u3066\u307e\u3057\u305f\u3002\uff08\u30d3\u30b8\u30cd\u30b9\u306e\u30a2\u30a4\u30c7\u30a2\u51fa\u3057\u3063\u3066\u96e3\u3057\u3044\u3067\u3059\u306d\uff09<\/p>\n
    \u6700\u8fd1\u306fYouTube<\/code>\u306e\u300c\u4ee4\u548c\u306e\u864e<\/strong>\u300d\u304c\u597d\u304d\u3067\u3088\u304f\u898b\u3066\u3044\u307e\u3059\u304c\u3001\u3042\u3042\u3084\u3063\u3066\u65b0\u3057\u3044\u3082\u306e\u3092\u5f62\u306b\u3057\u3088\u3046\u3068\u3059\u308b\u4eba\u305f\u3061\u306f\u3068\u3066\u3082\u5c0a\u656c\u3057\u307e\u3059\u3002\uff08\u3082\u3057\u79c1\u304c\u51fa\u305f\u3089\u5ca9\u4e95\u793e\u9577\u306b\u30dc\u30ed\u30ab\u30b9\u306b\u6012\u3089\u308c\u3066\u7d42\u308f\u308a\u305d\u3046\u2026\ud83d\ude2d\uff09<\/p>\n
    \u305c\u3072\u307f\u306a\u3055\u3093\u3082\u3044\u308d\u3093\u306a\u3053\u3068\u5984\u60f3\u3057\u306a\u304c\u3089\u300c\u81ea\u7531\u7814\u7a76\u300d\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n
    \u3067\u306f\u3067\u306f\u301c\u2757<\/p>\n
    \"\"\u300c\u30de\u30cd\u30fc\u306e\u864e\u306b\u51fa\u3066\u305f
    \n\u30ed\u30de\u30f3\u30c9\u30ed\u30fc\u30eb\u3001
    \n\u304a\u3044\u3057\u304b\u3063\u305f\u306a\u2026\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u3055\u3066\u3055\u3066\u3001\u4eca\u5e74\u3082\u6691\u3044\u590f\u304c\u3084\u3063\u3066\u304d\u305f\u306e\u3067\u3001\u307e\u305f\u3057\u3066\u3082\u300c\u81ea\u7531\u7814\u7a76\u300d\u7684\u306a\u6c17\u5206\u306b\u306a\u3063\u3066\u3044\u308b\u4eca\u65e5\u3053\u306e\u9803\u3067\u3059\u3002 \u305d\u3057\u3066\u3001\u305d\u3093\u306a\u3068\u304d\u306b\u3042\u308b\u300c\u3084\u3063\u3066\u307f\u305f\u3044\u3053\u3068\u300d\u304c\u5929\u304b\u3089\u964d\u3063\u3066\u304d … <\/p>\n
    “\u5199\u771f\u3068\u5730\u56f3\u304c\u4e00\u4f53\u5316\uff01Laravel\u3068Leaflet\u3067\u30c9\u30e9\u30c3\u30b0&\u30c9\u30ed\u30c3\u30d7\u4fdd\u5b58\u306e\u5b9f\u73fe\u65b9\u6cd5” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":11895,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,3],"tags":[20],"class_list":["post-11874","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-alpine-js","category-laravel","tag-20"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/11874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11874"}],"version-history":[{"count":10,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/11874\/revisions"}],"predecessor-version":[{"id":11898,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/11874\/revisions\/11898"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/11895"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}