[โค้ด] LeafletJS ระบุตำแหน่งลิงค์ไปแผนที่ LeafletJS + Google Maps

by boychawin

April 26, 2021 2,543

[โค้ด] LeafletJS ระบุตำแหน่งลิงค์ไปแผนที่ LeafletJS + Google Maps

มารู้จักกับ Leaflet คือ JavaScript library แบบโอเพนซอร์สที่ใช้ในการจัดการ แผนที่บนเว็บไซต์

ต่อเนื่องจาก

"สคริปต์ ระบุตำแหน่งลิงค์ไปแผนที่และแสดงผลบนเว็บไซต์ Google Maps API & JS"

โปรเจคข้างต้นจะใช้ Google Maps ในการแสดงผลค่าพิกัดที่ดึงมา ซึ่งถ้าเราไม่ได้จ่ายตังค์ พอใช้ไปสักระยะ “For development purposes only” อาจจะมีคำนี้ขึ้นมากวนใจได้ แต่โปรเจคนี้จะใช้ LeafletJS มาช่วยในการแสดงผลค่าพิกัดแทน เพราะฟรีๆ ซึ่งผมลองใช้งานมาสักระยะก็โอเคอยู่นะ เลยเอามาแชร์กัน Code อาจจะดูหลากหลายหน่อยนะครับ ฮ่าๆ เอาไปปรับใช้งานกันนะครับ

รายละเอียด

- LeafletJS
- Google Maps API
- CSS Framework Bootstrap 5
- Jquery

คำอธิบายวิธีใช้

1. คลิกที่ ปุ่ม "ระบุตำแหน่ง" จะมีการเรียกขอเข้าถึงตำแหน่งก่อน ให้ "อนุญาติ"
2. ระบบจะระบุตำแหน่งปัจจุบันแล้วดึง ลองจิจูด, ละติจูด มีแสดงที่ Text Box
3. เราจึงสามารถกด ดูแผนที่ จะลิงค์พร้อมแสดงตำแหน่งเราไปที่หน้า Google Maps
4. นำโค้ดไปปรับแต่งตามงานเราได้เลยนะครับ

ขั้นตอนการติดตั้ง

1. Copy โค้ดอยู่ด้านล่างนี้
2. ตั้งชื่อไฟล์ ใส่นามสกุล .HTML ก็ได้
3. รัน

ดูตัวอย่าง Youtube

GitHub

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>จับพิกัดตำแหน่งด้วย leaflets Map | boychawin.com</title>
    <!-- bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- map -->
    <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>

    <!-- boychawin.com -->
    <link href="https://boychawin.com/_next/static/css/d14dc5e59bd60eaeb5ad.css" rel='stylesheet'>
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">
    <div class="container">
        <div class="row">

            <div class="col g-3">
                <label class="form-label">ตำแหน่งสถานที่ <font color='red'> * </font></label>
            </div>
            <div class="row">
                <div class="col">
                    <!-- onkeyup="check_char2(this)" -->
                    <input name="lat" type="text" id="lat" class="form-control form-control-border" required placeholder="ใส่ ลองจิจูด ">
                </div>
                <div class="col">
                    <input name="lng" type="text" id="lng" class="form-control form-control-border" required placeholder="ใส่ ละติจูด ">
                </div>
                <div class="col-md-auto mt-1">
                    <a target="_blank" id="href_lat_lng" type="button" class="btn btn-default">ดูแผนที่</i></a>
                    <button type="button" onclick="getLocation()" class="btn btn-primary">ระบุตำแหน่ง</button>
                </div>
                <div class="col-md-auto">

                </div>
            </div>
            <div class="row g-3" id="mapholder"></div>

        </div>
    </div>

    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
    </script> -->
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <!-- google map api -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <script src="https://maps.google.com/maps/api/js?key=AIzaSyAtre5hg1C7qoa5XmCq40RAfEiaTqawrs0"></script>
    <script>
        function getLocation() {

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = "เบราว์เซอร์นี้ไม่รองรับการระบุตำแหน่งทางภูมิศาสตร์";

            }

        }

        function showPosition(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            // var latlon = new google.maps.LatLng(lat, lon)
            var latlon2 = position.coords.latitude + "," + position.coords.longitude;
            // var mapholder = document.getElementById('mapholder')
            mapholder.style.height = '500px';
            mapholder.style.width = '100%';


            var mymap = L.map('mapholder').setView([lat, lon], 24);

            L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

                    id: 'mapbox.streets'
                }).addTo(mymap);

            L.marker([lat, lon]).addTo(mymap)
                .bindPopup("<b>คุณอยู่ที่นี่</b>").openPopup();

            var popup = L.popup();

            function onMapClick(e) {
                L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap)
                popup
                    .setLatLng(e.latlng)
                    .setContent("ถ้าเลือกพิกัดนี้ให้คัดลอกไปใส่แทนพิกัดเดิม " + e.latlng.toString())
                    .openOn(mymap);
            }

            mymap.on('click', onMapClick);

            $("#lat").val(lat);
            $("#lng").val(lon);
            document.getElementById("href_lat_lng").href = "https://www.google.com/maps/place/" + latlon2 + "";


        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "ผู้ใช้ปฏิเสธคำขอ Geolocation"
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "ข้อมูลตำแหน่งไม่พร้อมใช้งาน"
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "คำขอเพื่อรับตำแหน่งของผู้ใช้หมดเวลา"
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "เกิดข้อผิดพลาดที่ไม่รู้จัก"
                    break;
            }
        }


        // function check_char2(elm) {
        // if (!elm.value.match(/^[0-9_., ]+$/i)) {
        //     alert('กรุณาระบุเป็นตัวเลข');
        //     elm.value = '';
        // }
        // }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>จับพิกัดตำแหน่งด้วย leaflets Map | boychawin.com</title>
    <!-- bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- map -->
    <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>

    <!-- boychawin.com -->
    <link href="https://boychawin.com/_next/static/css/d14dc5e59bd60eaeb5ad.css" rel='stylesheet'>
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">
    <div class="container">
        <div class="row">

            <div class="col g-3">
                <label class="form-label">ตำแหน่งสถานที่ <font color='red'> * </font></label>
            </div>
            <div class="row">
                <div class="col">
                    <!-- onkeyup="check_char2(this)" -->
                    <input name="lat" type="text" id="lat" class="form-control form-control-border" required placeholder="ใส่ ลองจิจูด ">
                </div>
                <div class="col">
                    <input name="lng" type="text" id="lng" class="form-control form-control-border" required placeholder="ใส่ ละติจูด ">
                </div>
                <div class="col-md-auto mt-1">
                    <a target="_blank" id="href_lat_lng" type="button" class="btn btn-default">ดูแผนที่</i></a>
                    <button type="button" onclick="getLocation()" class="btn btn-primary">ระบุตำแหน่ง</button>
                </div>
                <div class="col-md-auto">

                </div>
            </div>
            <div class="row g-3" id="mapholder"></div>

        </div>
    </div>

    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
    </script> -->
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <!-- google map api -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <script src="https://maps.google.com/maps/api/js?key=AIzaSyAtre5hg1C7qoa5XmCq40RAfEiaTqawrs0"></script>
    <script>
        function getLocation() {

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = "เบราว์เซอร์นี้ไม่รองรับการระบุตำแหน่งทางภูมิศาสตร์";

            }

        }

        function showPosition(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            // var latlon = new google.maps.LatLng(lat, lon)
            var latlon2 = position.coords.latitude + "," + position.coords.longitude;
            // var mapholder = document.getElementById('mapholder')
            mapholder.style.height = '500px';
            mapholder.style.width = '100%';


            var mymap = L.map('mapholder').setView([lat, lon], 24);

            L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

                    id: 'mapbox.streets'
                }).addTo(mymap);

            L.marker([lat, lon]).addTo(mymap)
                .bindPopup("<b>คุณอยู่ที่นี่</b>").openPopup();

            var popup = L.popup();

            function onMapClick(e) {
                L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap)
                popup
                    .setLatLng(e.latlng)
                    .setContent("ถ้าเลือกพิกัดนี้ให้คัดลอกไปใส่แทนพิกัดเดิม " + e.latlng.toString())
                    .openOn(mymap);
            }

            mymap.on('click', onMapClick);

            $("#lat").val(lat);
            $("#lng").val(lon);
            document.getElementById("href_lat_lng").href = "https://www.google.com/maps/place/" + latlon2 + "";


        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "ผู้ใช้ปฏิเสธคำขอ Geolocation"
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "ข้อมูลตำแหน่งไม่พร้อมใช้งาน"
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "คำขอเพื่อรับตำแหน่งของผู้ใช้หมดเวลา"
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "เกิดข้อผิดพลาดที่ไม่รู้จัก"
                    break;
            }
        }


        // function check_char2(elm) {
        // if (!elm.value.match(/^[0-9_., ]+$/i)) {
        //     alert('กรุณาระบุเป็นตัวเลข');
        //     elm.value = '';
        // }
        // }
    </script>
</body>

</html>