test2/kankoap.html at 3c50d59d6f82e64cb1b846a313253b740f45d068

Fork: 0

C1231429tado / test2

Find file

Newer

Older

test2 / kankoap.html

Tadokoro Tomoharu on 10 Jan 1 KB Update kankoap.html

Raw Blame History

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OSM地点表示</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #map { height: 600px; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const map = L.map('map').setView([38.535, 140.265], 8);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // OSMで作成した地点のデータ
        const points = [
            {lat: 38.535, lon: 140.265, name: "地点1"},
            {lat: 38.540, lon: 140.270, name: "地点2"},
            // 他の地点を追加
        ];

        points.forEach(point => {
            L.marker([point.lat, point.lon])
                .addTo(map)
                .bindPopup(point.name);
        });
    </script>
</body>
</html>