Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian autolengkap peta-tutorial js-php.cn

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian autolengkap peta

WBOY

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

asal

1262 orang telah melayarinya

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian autolengkap peta

Pertama sekali, kita perlu memahami apa fungsi carian auto-lengkap peta ialah. Carian auto-lengkap peta ialah kaedah di mana selepas pengguna memasukkan kata kunci dalam kotak input, peta secara automatik akan memaparkan hasil carian yang berkaitan berdasarkan kata kunci yang dimasukkan oleh pengguna. Fungsi ini sangat biasa dalam pelbagai aplikasi peta, seperti mencari tempat, mencari laluan, dsb.

Untuk menggunakan Peta JS dan Baidu bagi melaksanakan fungsi carian autolengkap peta, kami memerlukan beberapa langkah. Di bawah saya akan memperincikan setiap langkah dan memberikan contoh kod yang sepadan. Dalam artikel ini, saya akan menganggap bahawa anda sudah mempunyai pengetahuan asas tentang JS dan HTML.

Langkah 1: Perkenalkan API Peta Baidu
Pertama, kita perlu memperkenalkan API Peta Baidu ke dalam fail HTML. Mohon kunci API dalam Platform Terbuka Peta Baidu dan gantikan kunci dengan "yourAPIKey" dalam kod.

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

Salin selepas log masuk

Langkah 2: Buat bekas peta
Buat bekas dalam fail HTML untuk mengehoskan peta. Untuk kemudahan, kami memberikan bekas ini lebar dan ketinggian tetap.

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

Salin selepas log masuk

Langkah 3: Mulakan peta
Dalam JS, gunakan API Baidu Map untuk memulakan peta. Anda perlu menentukan objek bekas peta dan gaya peta.

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

Salin selepas log masuk

Langkah 4: Buat kotak carian autolengkap
Buat kotak input dalam fail HTML untuk pengguna memasukkan kata kunci. Anda perlu menentukan ID untuk kotak input untuk mendapatkan nilai kotak input dalam JS.

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

Salin selepas log masuk

Langkah 5: Tulis kod JS
Dalam JS, tulis kod untuk melaksanakan fungsi carian automatik peta. Kod tersebut akan memanggil API Peta Baidu untuk mendapatkan lokasi yang berkaitan berdasarkan kata kunci yang dimasukkan oleh pengguna dan memaparkannya pada peta.

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);
});

Salin selepas log masuk

Di atas ialah contoh kod yang menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian autolengkap peta. Anda boleh menyalin kod ini ke dalam projek anda dan mengubah suai serta mengoptimumkannya mengikut keperluan anda. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian autolengkap peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!