Блог

У меня есть карта mapbox и независимая, визуально разделенная форма с полями ввода для страны, города, улицы. Во всех найденных мной примерах для определения местоположения на карте mapbox используется поле ввода с автозаполнением.

Это не то, что я хочу. Автоматическое позиционирование карты должно начаться только после того, как я нажму кнопку с onclick= …, связанную с этой формой, считывающей данные формы. Есть ли полный (!) Пример для этого?

Соответствующий HTML-код:

 <div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ...';
var map = new mapboxgl.Map({
container: 'map', 
style: 'mapbox://styles/mapbox/streets-v11',
center: [8.54, 47.37],
zoom: 9 
</script>
<form id='mapform' >
<input id='country' value='ES'/>
<input id='city' value='Barcelona'/>
<input id=street' value='Carrer de Balmes'/>
</form>
<div class='button' onclick='locate();'>Locate</div>
 

и фрагмент скрипта JS, который должен быть завершен (реализован jQuery):

 function locate() {
  // you may suggest jQuery here:
  var wCountry = $("#mapform input[id=country]").val();
  var wCity = $("#mapform input[id=city]").val();
  var wStreet = $("#mapform input[id=street]").val();
  map.?????  
};