MapBoxで日本語地図出して、現在位置にピンを立てる(メモ)

mapbox

Last updated at 2024-10-29Posted at 2024-10-29

「CDNを使用する場合」で、やってみました。
かなり時間が掛かってしまったので、ここにメモしときます。
MapBoxは情報量が少ないのかも？
Google Maps API先生の方に乗り換えようかと…

参考にさせて頂いたサイトです。ありがとうございます。
https://qiita.com/katsunobu1008/items/21ca264d5793d23df9fe
https://qiita.com/mizo__/items/090cf6eb4151fb4d6725

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>地図表示</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
    
    <!-- 日本語化追記 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>

    <style>
        html { height: 100% }
        body { height: 100% }
        #map { height: 100%; width: 100%}
    </style>
</head>

<body>
    <div id='map'></div>

    <script>
        mapboxgl.accessToken = 'あなたのトークンをここに書く';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            //center: [139.7670516, 35.6811673], //東京駅
            //zoom: 15
        });
    
        //日本語化追記
        const language = new MapboxLanguage();
        map.addControl(language);
    
    
        // 位置情報の取得に成功した時の処理
        function success(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;

            // マーカーを作成し、地図に追加
           new mapboxgl.Marker({color:'red'})
                .setLngLat([longitude, latitude])
                .addTo(map);

            // 地図の中心をユーザーの現在位置に移動
            map.flyTo({
                center: [longitude, latitude],
                zoom: 15
            });
        }

        // 位置情報の取得に失敗した時の処理
        function error() {
            alert('位置情報の取得に失敗しました。');
        }

        // ユーザーの位置情報を取得
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition(success, error);
        } else {
            alert('お使いのブラウザでは、位置情報の取得がサポートされていません。');
        }
    </script>

</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up