Javascript 映射框自动完成获取长和宽
我正在vue组件中使用带有自动完成功能的Mapbox：Javascript 映射框自动完成获取长和宽,javascript,vue.js,mapbox-gl-js,Javascript,Vue.js,Mapbox Gl Js,我正在vue组件中使用带有自动完成功能的Mapbox： <template> <div> <div id='geocoder'></div> </div> </template> <script> import mapboxgl from 'mapbox-gl'; export default { data() { ret
<template>
<div>
<div id='geocoder'></div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
export default {
data() {
return {
map: null
}
},
created() {
Event.$on('map-created', (map) => {
this.map = map;
let geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
});
document.getElementById('geocoder').appendChild(geocoder.onAdd(this.map));
});
}
}
</script>
从“mapbox gl”导入mapboxgl；
导出默认值{
数据（）{
返回{
映射：空
}
},
创建（）{
事件。$on（'map-created'，（map）=>{
this.map=map；
let geocoder=新MapboxGeocoder({
accessToken:mapboxgl.accessToken，
});
document.getElementById（'geocoder'）.appendChild（geocoder.onAdd（this.map））；
});
}
}
this.map.on('click', '[YOUR LAYER ID]', (event) => {
console.log(event.features[0].geometry.coordinates);
});
当我添加自己的图层时，它会帮助我。自动完成输入字段，而无需地图
<!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_YOUR_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_YOUR_ACCESS_TOKEN_HERE'}）；
函数autocompleteSuggestionMapBoxAPI（输入参数，回调）{
geocodingClient.geocoding.forwardGeocode({
查询：inputParams，
国家：['在']，
自动完成：正确，
限额：5，
})
.send（）
。然后（响应=>{
常量匹配=response.body；
回调（匹配）；
});
}
功能自动完成输入框（inp）{
无功电流聚焦；
inp.addEventListener（“输入”，函数（e）{
var a，b，i，val=该值；
closeAllList（）；
如果（！val）{
返回false；
}
currentFocus=-1；
a=document.createElement（“DIV”）；
a、 setAttribute（“id”，this.id+“自动完成列表”）；
a、 setAttribute（“类”、“自动完成项”）；
this.parentNode.appendChild（a）；
//使用回调调用建议列表映射框api
autocompleteSuggestionMapBoxAPI（$（'#myInput'）.val（），函数（结果）{
结果.特征.forEach（功能（键）{
b=document.createElement（“DIV”）；
b、 innerHTML=“”+key.place_name.substr（0，val.length）+“”；
b、 innerHTML+=key.place\u name.substr（val.length）；
b、 innerHTML+=“”；
b、 addEventListener（“单击”，函数（e）{
设lat=$（this.find（'input'）.attr（'data-lat'）；
设long=$（this.find（'input'）.attr（'data-lng'）；
inp.value=$（this.find（'input'）.val（）；
$（inp）.attr（'data-lat'，lat）；
$（inp）.attr（'data-lng'，long）；
closeAllList（）；
});
a、 儿童（b）；
});
})
});
/*按键盘上的键执行功能：*/
inp.addEventListener（“向下键控”，函数（e）{
var x=document.getElementById（this.id+“自动完成列表”）；
如果（x）x=x.getElementsByTagName（“div”）；
如果（e.keyCode==40）{
/*如果按下向下箭头键，
增加currentFocus变量：*/
currentFocus++；
/*并使当前项目更加可见：*/
addActive（x）；
}如果（e.keyCode==38）{//up
/*如果按下向上箭头键，
减小currentFocus变量：*/
当前焦点--；
/*并使当前项目更加可见：*/
addActive（x）；
}否则如果（e.keyCode==13）{
/*如果按ENTER键，则阻止提交表单*/
e、 预防默认值（）；
如果（当前焦点>-1）{
/*并模拟单击“活动”项：*/
如果（x）x[currentFocus]。单击（）；
}
}
});
函数addActive（x）{
/*将项目分类为“活动”的函数：*/
如果（！x）返回false；
/*首先删除所有项目上的“活动”类：*/
清除活性（x）；
如果（currentFocus>=x.length）currentFocus=0
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types : 'place',
mapboxgl: mapboxgl
});
//Listen for the result event from the geocoder.
//'result' event is triggered when the user makes a selection
geocoder.on('result', function(e) {
var latlong = e.result.center;
});