如何解决如何禁用 Mapbox 的地理编码器的建议点击事件
当您输入搜索时,地理编码器会根据您的输入返回建议。如果您点击这些建议之一,该位置就会显示在地图上。
我只希望地图在点击 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 举报,一经查实,本站将立刻删除。