Как создать автозаполнение в MapKit JS, похожее на автозаполнение Google

Question

Мне удалось отобразить карты и маршруты на веб-странице с помощью Apple MapKit JS, но я не могу понять из документации , как работает поиск и автозаполнение из-за отсутствия примера кода. Я пробовал каждый поисковый запрос, который могу и не могу найти нигде. Если бы кто-то мог показать мне пример кода поиска / автозаполнения MapKit JS, я, вероятно, смогу выяснить, что из этого получится, чтобы подключить что-то похожее на автозаполнение мест Google.

Заранее спасибо.

Answer 1

Хорошо, теперь я понял это и поделился ответом для блага других.

С MapKit JS вы создаете новый поисковый объект, а затем вызываете autocomplete для этого объекта;Итак:

let search = new mapkit.Search({ region: map.region });
search.autocomplete('searchterm', (error, data) => {
    if (error) {
        return;
    }
        // handle the results
    });
});

MapKit JS отправляет результаты обратно в виде объекта в data.results, включая:

coordinate.latitude
coordinate.longitude
displayLines ([0] contains the place name and [1] is the address)

Таким образом, вы просто просматриваете результаты и строите список.

И собрав все это воедино:

Сначала CSS поможет сделать автозаполнение аккуратным:

<style>
    .mapSearchWrapper {
        position: relative;
    }
    .mapSearchInput {
        width: 100%;
        padding: 4px;
    }
    .mapSearchResults {
        display: none;
        position: absolute; 
        top: 20px; 
        left: 0px;
        z-index:9999;
        background: #FFFFFF; 
        border: 1px #CCCCCC solid;
        font-family: sans-serif;
    }
    .mapSearchResultsItem {
        padding: 4px;
        border-bottom: 1px #CCCCCC solid;
    }
    .mapSearchResultsItem:hover {
        background: #EEEEEE;
    }
</style>

Затем HTML, который будет содержать поле ввода, результаты и текущую карту.

<div class="mapSearchWrapper">
    <input type="text" id="mapLookup" class="mapSearchInput">
    <div id="results" class="mapSearchResults">
    </div>
</div>

<div id="map"></div>

А потом настоящий JavaScript, который сделает волшебство возможным. Примечание. У меня загружен JQuery, поэтому вам понадобится эта библиотека, если вы используете этот код.

<script type="text/javascript">
    // Initialise MapKit
    mapkit.init({
        authorizationCallback: function(done) {
        done('[REPLACE THIS WITH YOUR OWN TOKEN]');
        }
    });
    // Create an initial region. This also weights the search area 
    var myRegion = new mapkit.CoordinateRegion(
        new mapkit.Coordinate(55.9496320, -3.1866360),
        new mapkit.CoordinateSpan(0.05, 0.05)
    );
    // Create map on the id 'map'
    var map = new mapkit.Map("map");
    map.region = myRegion;
    // Listen for keyup in the input field
    $('#mapLookup').keyup(function(){
        // Make sure it's not a zero length string
        if($('#mapLookup').length>0) {
            let search = new mapkit.Search({ region: map.region });
            search.autocomplete($('#mapLookup').val(), (error, data) => {
                if (error) {
                    return;
                }
                // Unhide the result box
                $('#results').show();
                var results = "";
                // Loop through the results a build 
                data.results.forEach(function(result) {
                    if(result.coordinate) {
                        // Builds the HTML it'll display in the results. This includes the data in the attributes so it can be used later
                        results = results + '<div class="mapSearchResultsItem" data-title="' +result.displayLines[0] + '" data-latitude="'+result.coordinate.latitude+'" data-longitude="'+result.coordinate.longitude+'" data-address="'+result.displayLines[1]+'"><b>' + result.displayLines[0] + '</b> ' + result.displayLines[1] + '</div>';
                    }
                });
                // Display the results
                $('#results').html(results);
                // List for a click on an item we've just displayed
                $('.mapSearchResultsItem').click(function() {
                    // Get all the data - you might want to write this into form fields on your page to capture the data if this map is part of a form.
                    var latitude = $(this).data('latitude');
                    var longitude = $(this).data('longitude');
                    var title = $(this).data('title');
                    var address = $(this).data('address');
                    // Calc the new region
                    var myRegion = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(latitude, longitude),
                        new mapkit.CoordinateSpan(0.01, 0.01)
                    );
                    // Clean up the map of old searches
                    map.removeAnnotations(map.annotations);
                    map.region = myRegion;
                    // Add the new annotation
                    var myAnnotation = new mapkit.MarkerAnnotation(new mapkit.Coordinate(latitude, longitude), { 
                        color: "#9b6bcc", 
                        title: title,
                        subtitle: address
                    });
                    map.addAnnotation(myAnnotation);
                    // Hide the results box
                    $('#results').hide();
                });
            });
        } else {
            $('#results').hide();
        }
    });
</script>