javascript - How to clear the mapbox geocoder? - Stack Overflow

admin管理员组

文章数量:1429928

I use the Mapbox Geocoder and additionally several select menus to customize a map. Now I want to reset the geocoder as soon as the user selects a value from the select menu - so the input field should be cleared and the marker removed.

In the Docs a clear function is described and there is also a clear button in the default input field, but this function doesn't work if I call it from a change event.

This is what my attemp looks like so far:

const select  = $('#select');
const control = $('#geocoder');

const geocoder = new MapboxGeocoder({
 accessToken: accessToken,
 mapboxgl: mapboxgl
});

//Add the geocoder
document.getElementById(control).appendChild(geocoder.onAdd(map));

//Now reset the geocoder if the user selects something
select.change(function() {
 geocoder.clear();
});

I expect the reset of the input field and the removal of the marker, but the actual output is "geocoder.clear is not a function"

I use the Mapbox Geocoder and additionally several select menus to customize a map. Now I want to reset the geocoder as soon as the user selects a value from the select menu - so the input field should be cleared and the marker removed.

In the Docs a clear function is described and there is also a clear button in the default input field, but this function doesn't work if I call it from a change event.

This is what my attemp looks like so far:

const select  = $('#select');
const control = $('#geocoder');

const geocoder = new MapboxGeocoder({
 accessToken: accessToken,
 mapboxgl: mapboxgl
});

//Add the geocoder
document.getElementById(control).appendChild(geocoder.onAdd(map));

//Now reset the geocoder if the user selects something
select.change(function() {
 geocoder.clear();
});

I expect the reset of the input field and the removal of the marker, but the actual output is "geocoder.clear is not a function"

• javascript
• jquery
• mapbox-gl-js

Share Improve this question Follow asked May 7, 2019 at 8:02 agsslagssl 15322 silver badges1212 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I had a similar issue with a react app that uses mapbox-gl. I got around it by defining the marker outside of the geocoder.on call. This is all inside of the ponentDidMount method of the map ponent.

let marker = new mapboxgl.Marker({ draggable: false, color: "green" })

geocoder.on('result', function(e) {
  marker.setLngLat(e.result.center).addTo(map)
});

I used the geocoder.clear() function inside geoder.on('result', ...), and it is working. However, the geocoder is cleared and it is on focus. So, I added another line to lose the focus from the input.

geocoder.on('result', function(e) {
  geocoder.clear();
  document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].blur();
  ...
});

const geocoder = new MapboxGeocoder({
 accessToken: accessToken,
 mapboxgl: mapboxgl,
 marker:false,
});

geocoder.on('result', (result) => {
// add marker via result data by your self
})

本文标签： javascriptHow to clear the mapbox geocoderStack Overflow