Fatal编程技术网

Autocomplete 映射框自动完成

autocomplete mapbox

Autocomplete 映射框自动完成,autocomplete,mapbox,Autocomplete,Mapbox,我正在尝试在我的网站上实现Mapbox。 我想在我的主页上添加一个自动完成字段 我知道我可以将其添加到地图中，但我想知道是否可以使用单独的输入字段来完成工作？ 我在Mapbox文档中没有找到任何内容 有人能帮我吗 谢谢。mapbox团队在展示中的示例方面做得很好 关于您的查询：是的，您可以使用自己的输入字段。您需要做的是监听每个键盘输入，如中所示。将该值作为查询参数，然后按照中的操作发出API请求，然后显示API返回的建议 如果您使用的是React，那么您可以很好地使用相同的代码，只需修改输入的

我正在尝试在我的网站上实现Mapbox。 我想在我的主页上添加一个自动完成字段

我知道我可以将其添加到地图中，但我想知道是否可以使用单独的输入字段来完成工作？ 我在Mapbox文档中没有找到任何内容

有人能帮我吗

谢谢。

mapbox团队在展示中的示例方面做得很好

关于您的查询：是的，您可以使用自己的输入字段。您需要做的是监听每个键盘输入，如中所示。将该值作为查询参数，然后按照中的操作发出API请求，然后显示API返回的建议

如果您使用的是React，那么您可以很好地使用相同的代码，只需修改输入的样式即可

用于放置输入框 如果您使用的是传单JS，则可以将此输入添加为
否则，如果您使用的是mapbox gl js，则可以将其添加为其特定的。控件API只有固定的位置，如右上角、左上角、底部等。如果这不是您想要的位置，那么您可以将其作为简单的div覆盖放置。

我创建了类似的内容-与Mapbox分离。我的用例涉及从客户机获取一个.csv文件并将其转换为json格式，然后我使用slaple.js绑定地图标记。然后，我使用json文件和自动完成插件查询json数据集，以在地图上输出有关城市、州的信息。下面是要遵循的代码和代码笔：

var parseData=函数（）{
返回{
mapMarkersInit:函数（）{
//定义一个名为cssIcon的图标
var cssIcon=L.divIcon({
//指定我们可以在CSS中引用的类名。
类名：“css图标”，
//设置标记宽度和高度
iconAnchor:[5,5]，
iconSize:[10,10]
});
//控制台日志（placesData）；
placesData.forEach（函数（位置）{
L.marker（[place.Latitude，place.Longitude]，{icon:cssIcon}）.addTo（mymap）
.bindPopup（'City:'+place.State+'
'+
'人口：'+place.Population.toLocaleString（）+'
'+
“平面图：”+place.Sum+“
”+
“401（k）每人计划：”+数学圆（place.PerCapita）+”；
});
},
选择CitieSinit:function（）{
//映射数据和返回选项
var cityData=placesData.map（函数（位置）{
返回“”+位置。状态+“”；
});
//获取城市数据数组并将其字符串化
var options=cityData.join（“”）；
//console.log（选项）；
//将选择选项打印到页面
jQuery（“#输入城市”）.append（选项）；
},
选择更改：函数（）{
//获取用户输入城市
var city=jQuery（this.val（）；
//首选用于数据对象的方法。查找匹配项并退出数据集。
var place=placesData.find（函数（项）{
返回（item.State==城市）；
});
//最佳实践-首先处理错误，如果出现错误则返回函数外
如果（！地点）{
jQuery（'#place data'）.html（'error！city not found'）；
返回；
}
//现在从数据创建html
var cityData=“”+
''+地点.州+'|'+
'人口：'+place.Population.toLocaleString（）+'|'+
“平面图：”+place.Sum+“|”+
“401（k）每人计划：”+数学圆（place.PerCapita）+”；
//打印城市数据
jQuery（'#placedata'）.html（cityData）；
}
}
};
使用MAPBOX API完成建议输入框

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


添加一个地理编码器
* {
框大小：边框框；
}
身体{
字体：16px Arial；
}
/*容器必须相对以下位置放置：*/
.自动完成{
位置：相对位置；
显示：内联块；
}
输入{
边框：1px实心透明；
背景色：#f1f1；
填充：10px；
字体大小：16px；
}
输入[类型=文本]{
背景色：#f1f1；
宽度：100%；
}
输入[类型=提交]{
背景色：淡蓝色；
颜色：#fff；
光标：指针；
}
.自动完成项目{
位置：绝对位置；
边框：1px实心#d4；
边框底部：无；
边界顶部：无；
z指数：99；
/*将自动完成项目定位为与容器相同的宽度：*/
最高：100%；
左：0；
右：0；
}
.autocomplete items div{
填充：10px；
光标：指针；
背景色：#fff；
边框底部：1px实心#d4；
}
/*悬停项目时：*/
.自动完成项目div:悬停{
背景色：#e9e9e9；
}
/*使用箭头键浏览项目时：*/
.自动完成活动{
背景色：道奇蓝！重要；
颜色：#ffffff；
}
自动完成
开始键入：

var geocodingClient=mapboxSdk（{accessToken:'ADD_ACCESS_TOKEN_HERE'}）；
函数autocompleteSuggestionMapBoxAPI（输入参数，回调）{
geocodingClient.geocoding.forwardGeocode({
查询：inputParams，
国家：['在']，
自动完成：正确，
限额：5，
})