Как настроить API геокодирования mapbox и API isochrone для совместной работы? - PullRequest
Новая
       7

Как настроить API геокодирования mapbox и API isochrone для совместной работы?

1 голос
/ 17 января 2020

После выполнения этих двух руководств на веб-сайте mapbox API Isochrone и API геокодирования Я подумал, что попытаюсь добавить их вместе. Я бы хотел, чтобы пользователь ввел адрес в строке поиска геокодирования, а затем построил слой изохроны. Моя проблема в том, что функция getIso срабатывает перед вводом местоположения, и я возвращаю эту ошибку

TypeError: geocoder.mapMarker имеет значение null

, которое я понимаю потому что не было пользовательского ввода для API геокодирования для размещения маркера. Вы заметите, что я беру лат и lng из геокодера. 

var lon = geocoder.mapMarker._lnglat.lng;
var lat = geocoder.mapMarker._lnglat.lat;

Итак, как мне активировать мою функцию getIso после пользователя вводит информацию в геокодер? 

    // // geocoder search bar
    var geocoder = new MapboxGeocoder({ 
        accessToken: mapboxgl.accessToken, 
        mapboxgl: mapboxgl,
        zoom: 13, 
        placeholder: "Enter an address or place name", 
        bbox: [-105.214, 40.451, -104.850, 40.841] 
      }, getIso());
    map.addControl(geocoder, 'top-left'); 
    console.log(geocoder)

    // // Create variables to use in isochrone API
    var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
    var lon = geocoder.mapMarker._lnglat.lng;
    var lat = geocoder.mapMarker._lnglat.lat;
    var profile = 'cycling';
    var minutes = 10;

   // Create a function that sets up the Isochrone API query then makes an Ajax call
    function getIso() {
        var query = urlBase + profile + '/' + lon + ',' + lat + '?contours_minutes=' + minutes + '&polygons=true&access_token=' + mapboxgl.accessToken;

        $.ajax({
        method: 'GET',
        url: query
        }).done(function(data) {
            map.getSource('iso').setData(data);
        })
    };
    map.addSource('iso', {
        type: 'geojson',
        data: {
        'type': 'FeatureCollection',
        'features': []
        }
    });
    map.addLayer({
        'id': 'isoLayer',
        'type': 'fill',
        // Use "iso" as the data source for this layer
        'source': 'iso',
        'layout': {},
        'paint': {
        // The fill color for the layer is set to a light purple
        'fill-color': '#5a3fc0',
        'fill-opacity': 0.3
        }
    }, "poi-label");
...