एक विशिष्ट इनपुट बॉक्स में पूरा ऑटो MapBox कैसे जोड़ें

वोट
0

मैं MapBox के लिए नया हूँ। मैं नक्शा बॉक्स का उपयोग कर स्वत: पूर्ण सुविधा जोड़ना चाहते हैं, यह ठीक workes जब मैं जोड़ने

var geocoder = L.mapbox.geocoderControl('mapbox.places', {autocomplete:true});
            geocoder.addTo(map);

लेकिन मैं प्रदर्शन मेरी पसंद का एक विशिष्ट इनपुट बॉक्स पर स्वत: पूर्ण समारोह चाहते हैं। क्या यह करना मुमकिन है।

08/10/2015 को 20:19
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


3 जवाब

वोट
1

MapBox की जियोकोडर जो सब कुछ यह अपने आप ही की जरूरत है बनाता है काफी आत्म निहित प्लगइन है। अगर मैं अपने परिदृश्य के लिए आगे एक मार्ग प्रदान करने के लिए किया था, मैं एक कांटा शामिल किया जाएगा कि इस प्रक्रिया के अंदर आयोजित हेरफेर होगा कहने के लिए होता onAddडोम तत्वों विकल्पों के माध्यम से में पारित से निपटने के लिए।

09/10/2015 को 13:16
का स्रोत उपयोगकर्ता

वोट
1

क्या मैं इस के आसपास पाने के लिए किया था मैं आपूर्ति सीएसएस लोड नहीं किया था, लेकिन अपने ही इस्तेमाल किया। के बाद आप map.addControl () फोन मैं से बाहर मेरी div धारक को नियंत्रण ले जाने के लिए appendTo इस्तेमाल किया <div class="mapboxgl-ctrl-top-right"></div>

$(".mapboxgl-ctrl-geocoder").appendTo("#autocomplete-placeholder")

दोष यह JQuery पर निर्भर है, लेकिन हम पहले से ही प्रयोग कर रहे हैं। मेरे समाप्त परिणाम इस प्रकार है:यहाँ छवि विवरण दर्ज

11/05/2017 को 19:46
का स्रोत उपयोगकर्ता

वोट
0

MapBox एपीआई के साथ स्वत: पूर्ण इनपुट बॉक्स

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Add a geocoder</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <script src="https://code.jquery.com/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font: 16px Arial;
        }

        /*the container must be positioned relative:*/
        .autocomplete {
            position: relative;
            display: inline-block;
        }

        input {
            border: 1px solid transparent;
            background-color: #f1f1f1;
            padding: 10px;
            font-size: 16px;
        }

        input[type=text] {
            background-color: #f1f1f1;
            width: 100%;
        }

        input[type=submit] {
            background-color: DodgerBlue;
            color: #fff;
            cursor: pointer;
        }

        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            /*position the autocomplete items to be the same width as the container:*/
            top: 100%;
            left: 0;
            right: 0;
        }

        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

        /*when navigating through the items using the arrow keys:*/
        .autocomplete-active {
            background-color: DodgerBlue !important;
            color: #ffffff;
        }
    </style>
</head>
<body>

<h2>Autocomplete</h2>

<p>Start typing:</p>

<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="myCountry" placeholder="Country">
    </div>
    <input type="submit">
</form>

<script>

    var geocodingClient = mapboxSdk({accessToken: 'ADD_ACCESS_TOKEN_HERE'});

    function autocompleteSuggestionMapBoxAPI(inputParams, callback) {
        geocodingClient.geocoding.forwardGeocode({
            query: inputParams,
            countries: ['In'],
            autocomplete: true,
            limit: 5,
        })
            .send()
            .then(response => {
                const match = response.body;
                callback(match);
            });
    }

    function autocompleteInputBox(inp) {
        var currentFocus;
        inp.addEventListener("input", function (e) {
            var a, b, i, val = this.value;
            closeAllLists();
            if (!val) {
                return false;
            }
            currentFocus = -1;
            a = document.createElement("DIV");
            a.setAttribute("id", this.id + "autocomplete-list");
            a.setAttribute("class", "autocomplete-items");
            this.parentNode.appendChild(a);

            // suggestion list MapBox api called with callback
            autocompleteSuggestionMapBoxAPI($('#myInput').val(), function (results) {
                results.features.forEach(function (key) {
                    b = document.createElement("DIV");
                    b.innerHTML = "<strong>" + key.place_name.substr(0, val.length) + "</strong>";
                    b.innerHTML += key.place_name.substr(val.length);
                    b.innerHTML += "<input type='hidden' data-lat='" + key.geometry.coordinates[1] + "' data-lng='" + key.geometry.coordinates[0] + "'  value='" + key.place_name + "'>";
                    b.addEventListener("click", function (e) {
                        let lat = $(this).find('input').attr('data-lat');
                        let long = $(this).find('input').attr('data-lng');
                        inp.value = $(this).find('input').val();
                        $(inp).attr('data-lat', lat);
                        $(inp).attr('data-lng', long);
                        closeAllLists();
                    });
                    a.appendChild(b);
                });
            })
        });


        /*execute a function presses a key on the keyboard:*/
        inp.addEventListener("keydown", function (e) {
            var x = document.getElementById(this.id + "autocomplete-list");
            if (x) x = x.getElementsByTagName("div");
            if (e.keyCode == 40) {
                /*If the arrow DOWN key is pressed,
                increase the currentFocus variable:*/
                currentFocus++;
                /*and and make the current item more visible:*/
                addActive(x);
            } else if (e.keyCode == 38) { //up
                /*If the arrow UP key is pressed,
                decrease the currentFocus variable:*/
                currentFocus--;
                /*and and make the current item more visible:*/
                addActive(x);
            } else if (e.keyCode == 13) {
                /*If the ENTER key is pressed, prevent the form from being submitted,*/
                e.preventDefault();
                if (currentFocus > -1) {
                    /*and simulate a click on the "active" item:*/
                    if (x) x[currentFocus].click();
                }
            }
        });

        function addActive(x) {
            /*a function to classify an item as "active":*/
            if (!x) return false;
            /*start by removing the "active" class on all items:*/
            removeActive(x);
            if (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (x.length - 1);
            /*add class "autocomplete-active":*/
            x[currentFocus].classList.add("autocomplete-active");
        }

        function removeActive(x) {
            /*a function to remove the "active" class from all autocomplete items:*/
            for (var i = 0; i < x.length; i++) {
                x[i].classList.remove("autocomplete-active");
            }
        }

        function closeAllLists(elmnt) {
            /*close all autocomplete lists in the document,
            except the one passed as an argument:*/
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != inp) {
                    x[i].parentNode.removeChild(x[i]);
                }
            }
        }

        /*execute a function when someone clicks in the document:*/
        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
    }

    autocompleteInputBox(document.getElementById("myInput"));
</script>


</body>
</html>
28/02/2020 को 09:06
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more