So verwenden Sie JS und Baidu Maps, um die Suchfunktion zur automatischen Vervollständigung von Karten zu implementieren-js-Tutorial-php.cn

So verwenden Sie JS und Baidu Maps, um die Suchfunktion zur automatischen Vervollständigung von Karten zu implementieren

WBOY

Freigeben： 2023-11-21 13:58:29

Original

1286 Leute haben es durchsucht

So verwenden Sie JS und Baidu Maps, um die Suchfunktion zur automatischen Vervollständigung von Karten zu implementieren

So verwenden Sie JS und Baidu Maps, um die Suchfunktion zur automatischen Vervollständigung der Karte zu implementieren

Zunächst müssen wir verstehen, was die Suchfunktion zur automatischen Vervollständigung der Karte ist. Die automatische Kartenvervollständigungssuche ist eine Methode, bei der die Karte automatisch relevante Suchergebnisse basierend auf den vom Benutzer eingegebenen Schlüsselwörtern anzeigt, nachdem der Benutzer Schlüsselwörter in das Eingabefeld eingegeben hat. Diese Funktion ist in verschiedenen Kartenanwendungen sehr verbreitet, z. B. bei der Suche nach Orten, der Suche nach Routen usw.

Um JS und Baidu Maps zur Implementierung der automatischen Kartenvervollständigungssuchfunktion zu verwenden, sind mehrere Schritte erforderlich. Im Folgenden werde ich jeden Schritt detailliert beschreiben und entsprechende Codebeispiele bereitstellen. In diesem Artikel gehe ich davon aus, dass Sie bereits über Grundkenntnisse in JS und HTML verfügen.

Schritt 1: Baidu Map API einführen
Zuerst müssen wir die Baidu Map API in die HTML-Datei einführen. Beantragen Sie einen API-Schlüssel in der Baidu Map Open Platform und ersetzen Sie den Schlüssel durch „yourAPIKey“ im Code.

<head>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=yourAPIKey"></script>
</head>

Nach dem Login kopieren

Schritt 2: Erstellen Sie einen Kartencontainer
Erstellen Sie einen Container in der HTML-Datei, um die Karte zu hosten. Der Einfachheit halber geben wir diesem Container eine feste Breite und Höhe.

<div id="map" style="width: 800px; height: 600px;"></div>

Nach dem Login kopieren

Schritt 3: Initialisieren Sie die Karte
In JS verwenden Sie die API von Baidu Map, um die Karte zu initialisieren. Sie müssen das Containerobjekt der Karte und den Stil der Karte angeben.

var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

Nach dem Login kopieren

Schritt 4: Erstellen Sie ein Suchfeld für die automatische Vervollständigung
Erstellen Sie in der HTML-Datei ein Eingabefeld, in das Benutzer Schlüsselwörter eingeben können. Sie müssen eine ID für das Eingabefeld angeben, um den Wert des Eingabefelds in JS zu erhalten.

<input type="text" id="keyword" />

Nach dem Login kopieren

Schritt 5: JS-Code schreiben
Schreiben Sie in JS Code, um die Suchfunktion zur automatischen Vervollständigung der Karte zu implementieren. Der Code ruft die API von Baidu Map auf, um relevante Standorte basierend auf den vom Benutzer eingegebenen Schlüsselwörtern zu ermitteln und sie auf der Karte anzuzeigen.

var keywordInput = document.getElementById("keyword");
var autoComplete = new BMap.Autocomplete({
    input: keywordInput,
    location: map
});

autoComplete.addEventListener("onconfirm", function (e) {
    var _value = e.item.value;
    var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

    var options = {
        onSearchComplete: function (results) {
            // 获取第一个搜索结果，并将地图移动到该位置
            var poi = results.getPoi(0);
            map.setCenter(poi.point);
        }
    };

    // 在地图上显示搜索结果
    var local = new BMap.LocalSearch(map, options);
    local.search(myValue);
});

Nach dem Login kopieren

Das Obige ist ein Codebeispiel, bei dem JS und Baidu Maps verwendet werden, um die Suchfunktion zur automatischen Vervollständigung der Karte zu implementieren. Diese Codes können Sie in Ihr Projekt kopieren und entsprechend Ihren Bedürfnissen modifizieren und optimieren. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS und Baidu Maps, um die Suchfunktion zur automatischen Vervollständigung von Karten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!