如何禁用 Mapbox 的地理编码器的建议点击事件

编程问答 2022-05-28

问题描述

当您输入搜索时，地理编码器会根据您的输入返回建议。如果您点击这些建议之一，该位置就会显示在地图上。

我只希望地图在点击 view locations 按钮时导航到输入的位置，而不是在点击建议项时导航。

有没有办法禁用当建议项是点击时发生的事件？

/* ==========================================================================
                                 Global elements
   ========================================================================== */

const locations_filter_div = document.getElementById('locations-filter-div');
const locations_service_div = document.getElementById('locations-service-div');
const service_div_with_text = document.querySelector('#locations-service-div .bridge-text');
const country_selector = document.getElementById('country-selector');
const find_locations_results_section = document.getElementById('find-a-location-result-section');
const view_all_locations_result_section = document.getElementById('view-all-locations-result-section');
const city_listings_div = document.getElementById('city-listings-div');
const state_country_listing = document.getElementById('state-country-listing');



/* ==========================================================================
                                 Geocoder - Search
   ========================================================================== */

mapBoxgl.accesstoken = 'pk.eyJ1IjoiZWR3YXJkc3ByZXN1bWUiLCJhIjoiY2tqbG4wcHB2MjJhbjJybXBlemtpcmd4OSJ9.HHMkDDtQe5vJ2DO77bbEHQ';

let geocoder = new MapBoxGeocoder({
  accesstoken: mapBoxgl.accesstoken,mapBoxgl: mapBoxgl,marker: false,placeholder: 'Search city,state,zip',types: 'country,place,region,locality,postcode',});

let find_a_location_map = new mapBoxgl.Map({
  style: 'mapBox://styles/mapBox/streets-v11',container: 'find-a-location-map-div',zoom: 10,});


document.getElementById('geocoder-search-container').appendChild(geocoder.onAdd(find_a_location_map));

const geocoder_search_input = document.querySelector('#geocoder-search-container .mapBoxgl-ctrl-geocoder--input');


geocoder_search_input.setAttribute('minlength',2);



/* ==========================================================================
                        Toggle location region type
   ========================================================================== */

function toggle_locations_region_type(button) {

  // remove the selected class from currently selected button
  document.querySelector('.locations-region-type-btn.selected').classList.remove('selected');

  // added the selected class to the clicked button
  button.classList.add('selected');

  if (button.id == 'usa-locations-btn') {
    locations_filter_div.classList.add('show');
    country_selector.classList.remove('show');
  }

  if (button.id == 'international-locations-btn') {
    locations_filter_div.classList.remove('show');
    country_selector.classList.add('show');
  }

  if (find_locations_results_section.classList.contains('show')) find_locations_results_section.classList.remove('show');
}



/* ==========================================================================
                                Load find a location map
   ========================================================================== */

function query_location_search(search_input,zoom) {


  find_a_location_map.resize();
  geocoder.query(search_input).setFlyTo({
    animate: false
  });


  geocoder.on('result',function(e) {
    // geocoder.clear();

  });

}







/* ==========================================================================
                        Find a location trigger functions
   ========================================================================== */

function fal_view_locations(event) {

  event.preventDefault();
  const find_a_location_form = document.getElementById('find-a-location-form');
  const selected_region_type_btn = document.querySelector('.locations-region-type-btn.selected');

  let map_zoom;
  let geocoder_query = '';

  // check if international is currently selected 
  if (selected_region_type_btn.id == 'international-locations-btn') {
    country_selector.required = true;
    geocoder_search_input.required = false;

    map_zoom = 2;
    geocoder_query = country_selector.options[country_selector.selectedindex].text;
  } else {
    geocoder_search_input.required = true;
    country_selector.required = false;

    map_zoom = 12
    geocoder_query = geocoder_search_input.value;
  }

  // check if the form is valid
  if (find_a_location_form.checkValidity()) {

    find_locations_results_section.classList.add('show');
    query_location_search(geocoder_query,map_zoom);
  }

  // report error if form invalid
  else find_a_location_form.reportValidity();

}
.inner {
  margin: 0 auto;
  max-width: 1190px
}

#new-locations-section {
  margin-top: 30px
}

#new-locations-section button {
  border: 0;
  padding: 0;
  font-size: 16px;
  cursor: pointer;
  outline-width: 0;
  background: transparent
}

#locations-query-type-nav,#locations-region-type-nav {
  margin-bottom: 30px
}

#locations-query-type-nav .locations-query-type-btn:not(.selected),#locations-query-type-nav .locations-region-type-btn:not(.selected),#locations-region-type-nav .locations-query-type-btn:not(.selected),#locations-region-type-nav .locations-region-type-btn:not(.selected) {
  color: #478bb8;
  text-decoration: underline
}

#locations-query-type-nav .locations-query-type-btn:not(.selected).selected,#locations-query-type-nav .locations-region-type-btn:not(.selected).selected,#locations-region-type-nav .locations-query-type-btn:not(.selected).selected,#locations-region-type-nav .locations-region-type-btn:not(.selected).selected {
  color: #000;
  cursor: default;
  pointer-events: none;
  text-decoration: none
}

#new-locations-section .bridge-text {
  margin: 0 10px;
  display: inline-block
}

#new-locations-section #locations-service-div .bridge-text {
  margin-left: 0
}

#find-a-location-controls,#view-all-locations-form {
  display: none
}

#find-a-location-controls.show,#view-all-locations-form.show {
  display: block
}

#locations-region-type-nav #usa-locations-btn {
  margin-right: 15px
}

#new-locations-section #radius-selector,#new-locations-section .services-selector,#new-locations-section #country-selector {
  padding: 8px 12px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ebeaea
}

#new-locations-section #locations-filter-div,#new-locations-section #country-selector {
  display: none
}

#new-locations-section #locations-filter-div.show {
  display: inline
}

#new-locations-section #country-selector.show {
  display: inline-block
}

#new-locations-section #radius-and-search-div,#new-locations-section #locations-service-div,#geocoder-search-container {
  display: inline-block
}

#new-locations-section #locations-filter-div>span {
  margin-right: 5px
}

#new-locations-section #radius-and-search-div,#new-locations-section #fal-services-selector {
  margin-bottom: 15px
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder {
  all: unset;
  position: relative
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--input {
  height: unset;
  border-radius: 5px;
  background: #fff;
  padding: 8px 30px 8px 35px;
  border: 1px solid #ebeaea
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--input:focus {
  outline: unset
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--icon-search {
  top: 50%;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--icon-close {
  margin: 0;
  width: 17px;
  height: 17px
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--button {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--icon-close:hover {
  fill: red
}

#geocoder-search-container .mapBoxgl-ctrl-geocoder--icon-loading {
  margin-top: -10px
}

#geocoder-search-container .suggestions {
  top: calc(100% + 22px)
}

#new-locations-section #country-selector,#new-locations-section .services-selector {
  margin-right: 10px
}

#new-locations-section #view-locations-btn,#new-locations-section .mail-center-card .choose-location-btn {
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ee7021;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease
}

#new-locations-section #view-locations-btn:hover,#new-locations-section .mail-center-card .choose-location-btn:hover {
  -webkit-filter: brightness(107%);
  filter: brightness(107%)
}

#find-a-location-result-section,#view-all-locations-result-section {
  display: none;
  margin-top: 20px
}

#find-a-location-result-section.show,#view-all-locations-result-section.show {
  display: -ms-grid;
  display: grid
}

#find-a-location-map-div .mapBoxgl-ctrl-geocoder.mapBoxgl-ctrl {
  display: none
}

@media (max-width: 767px) {
  .inner {
    width: 96%
  }
}

@media (max-width: 579px) {
  #new-locations-section #radius-and-search-div {
    margin-top: 10px
  }
}

@media (max-width: 423px) {
  #geocoder-search-container {
    width: 58%
  }
}

@media (max-width: 355px) {
  #radius-and-search-div .bridge-text {
    margin: 0 5px
  }
  #locations-filter-div #radius-selector {
    padding: 8px 6px
  }
}

@media (min-width: 768px) {
  .inner {
    width: 80%
  }
  #find-a-location-result-section.show {
    height: 700px
  }
}

@media (min-width: 1037px) {
  #geocoder-search-container {
    margin-right: 10px
  }
}


/*# sourceMappingURL=main.min.css.map */
<script src='https://api.mapBox.com/mapBox-gl-js/v2.0.1/mapBox-gl.js'></script>
<link href='https://api.mapBox.com/mapBox-gl-js/v2.0.1/mapBox-gl.css' rel='stylesheet' />
<script src='https://api.mapBox.com/mapBox-gl-js/plugins/mapBox-gl-geocoder/v4.7.0/mapBox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapBox.com/mapBox-gl-js/plugins/mapBox-gl-geocoder/v4.7.0/mapBox-gl-geocoder.css' type='text/css' />


<main class="inner">



  <!------------------------------------------------------ Section to integrate ------------------------------------------------------>

  <section id="new-locations-section">





    <div id="find-a-location-controls" class="show">

      <!------------------------------------------------------ Locations region type div ------------------------------------------------------>

      <nav id="locations-region-type-nav">

        <button id="usa-locations-btn" class="locations-region-type-btn selected" onclick="toggle_locations_region_type(this)">USA</button>

        <button id="international-locations-btn" class="locations-region-type-btn" onclick="toggle_locations_region_type(this)">International</button>

      </nav>


      <!------------------------------------------------------ locations filter form  ------------------------------------------------------>

      <form id="find-a-location-form">


        <!------------------------------------------------------ Locations filter div ------------------------------------------------------>

        <div id="locations-filter-div" class="show">

          <span>Find a location within</span>

          <div id="radius-and-search-div">

            <select name="radius-selector" id="radius-selector">
              <option value="10">10 miles</option>
              <option value="20">20 miles</option>
            </select>

            <span class="bridge-text">
                                of
                            </span>

            <div id='geocoder-search-container'></div>

          </div>


          <!------------------------------------------------------ Locations service div ------------------------------------------------------>

          <div id="locations-service-div">

            <span class="bridge-text">with</span>

            <select name="fal-services-selector" id="fal-services-selector" class="services-selector">
              <option selected value="all">All services</option>
              <option value="office-building">Office Building</option>
              <option value="international-shipping">International Shipping</option>
              <option value="check-deposit">Offers check deposit services</option>
            </select>

          </div>

        </div>


        <select name="country-selector" id="country-selector">
          <option selected disabled value>Select a country</option>
          <option value="38">Canada</option>
          <option value="44">China</option>
          <option value="44">Italy</option>
          <option value="44">Singapore</option>
          <option value="44">Switzerland</option>
          <option value="44">Spain</option>
          <option value="44">United Kingdom</option>
        </select>

        <button id="view-locations-btn" onclick="fal_view_locations(event)">View Locations</button>

      </form>

    </div>




    <!------------------------------------------------------ Find a locations result section ------------------------------------------------------>

    <section id="find-a-location-result-section">

      <div id="find-a-location-map-div"></div>



    </section>


</main>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

geocodejavascriptmapboxmapboxmapbox-gl-jssearch

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...