Я пытаюсь увеличить свои маркеры из строки поиска, созданной с помощью Javascript. Эта панель поиска имеет форму автозаполнения, и эта функция работает хорошо. Но когда я выбираю один из своих ледников (я работаю со швейцарскими ледниками) на панели выбора, взаимодействия не происходит, и я не совсем понимаю, как я мог создать это взаимодействие.
У меня нет большого опыта в Javascript, HTML ... Так что, если вы можете быть настолько ясны, насколько это возможно, это может быть круто! Я уверен, что вся информация о ледниках хранится в базе данных sql.
Вот часть моего кода, которая может быть важной:
HTML часть:
<body>
<div class = "main">
<div id="map" class="glaciers"></div>
<div id= "coordonnees">Coordonnées: déplacez la souris sur la carte</div>
<div class = "sidebar_gl">
<p class= "explication"> Choix du glacier:</p>
<form autocomplete="off" id= "glacier_form" action="zoom_barre">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myGlacier" placeholder="Glaciers">
</div>
<input id = "button_submit" type="submit">
</form>
</div>
</div>
Javascript часть:
function show_glaciers(){
var url = '/glaciers_info.json';
$.getJSON(url, function(data){
var dict={};
for (var i=0; i <data.length; i++){
var glacier = data[i];
dict[glacier.nom]=ajouter_marqueur_glacier(glacier);
}
GlacierDictionary =dict; // store Globale
autocomplete(document.getElementById("myInput"), Object.keys(dict));
});
}
show_glaciers();
function zoom_barre(glacier){
$('#myInput').on('change', function(e){
var id_glacier = $('#myInput').val();
if (id_glacier == "") return;
var glacier = glacier[id_glacier]
mymap.panTo(([glacier.y, glacier.x]), {animate: true});
mymap.flyTo(([glacier.y, glacier.x]),14);
});
}
zoom_barre()
}
Спасибо за ваш ответ