Retrieve data from mapbox geocoder

问题

i only need the mapbox geocoding autocomplete without the map (to put the result with lat/lng in another request)

I managed to put it totally alone without the map using this :

<template>
    <div id='geocoder' class='geocoder'></div>
</template>

<script>
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
require('../../node_modules/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css')

mapboxgl.accessToken = '<your access token here>';
var geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
    placeholder: 'Rechercher'
});
document.getElementById('geocoder').appendChild(geocoder.onAdd());
</script>

But now i would like to retrieve the data (specifically the lat/lng attribute in order to save it in my component and work with it)

How can i do that ? i've search through mapbox doc but did not found anything about that :/

Thanks in advance to the community

回答1:

From the API docs https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on you can use

geocoder.on('results', function(results) {
   console.log(results);
})

回答2:

I've finally found a cheaper and easier to integrate alternative :

https://community.algolia.com/places/documentation.html#using-npm

here is the simple code :

<template>
    <input type="search" id="address-input" placeholder="Where are we going?" />
</template>

<script>
import Places from 'places.js'

...
    mounted: function() {
        var placesAutocomplete = new Places({
            container: document.querySelector('#address-input')
        })
        placesAutocomplete.on('change', e => console.log(e.suggestion))
    }
</script>

来源：https://stackoverflow.com/questions/51406675/retrieve-data-from-mapbox-geocoder

标签

mapbox

mapbox-gl-js