Home >Web Front-end >JS Tutorial >How to use JS and Baidu Maps to implement map auto-complete search function

How to use JS and Baidu Maps to implement map auto-complete search function

WBOYOriginal: 2023-11-21 13:58:291304browse

How to use JS and Baidu Maps to implement the map auto-complete search function

First of all, we need to understand what the map auto-complete search function is. Map auto-complete search is a method where after the user enters keywords in the input box, the map will automatically display relevant search results based on the keywords entered by the user. This function is very common in various map applications, such as searching for places, finding routes, etc.

To use JS and Baidu Maps to implement the map auto-complete search function, we need several steps. Below I'll detail each step and provide corresponding code examples. In this article, I will assume that you already have some basic knowledge of JS and HTML.

Step 1: Introduce Baidu Map API
First, we need to introduce Baidu Map API into the HTML file. Apply for an API key in the Baidu Map Open Platform and replace the key with "yourAPIKey" in the code.

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

Step 2: Create a map container
Create a container in the HTML file to host the map. For convenience, we give this container a fixed width and height.

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

Step 3: Initialize the map
In JS, use Baidu Map’s API to initialize the map. You need to specify the container object of the map and the style of the map.

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

Step 4: Create an auto-complete search box
Create an input box in the HTML file for users to enter keywords. You need to specify an ID for the input box to get the value of the input box in JS.

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

Step 5: Write JS code
In JS, write code to implement the automatic search function of the map. The code will call Baidu Map's API to obtain relevant locations based on the keywords entered by the user, and display them on the map.

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

The above is a code example of using JS and Baidu Maps to implement the map auto-complete search function. You can copy these codes into your project and modify and optimize them according to your needs. Hope this article will be helpful to you.

The above is the detailed content of How to use JS and Baidu Maps to implement map auto-complete search function. For more information, please follow other related articles on the PHP Chinese website!

html JS 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Using JavaScript and Tencent Maps to implement map path planning functionNext article：Using JavaScript and Tencent Maps to implement map path planning function

See more

How to use JS and Baidu Maps to implement map auto-complete search function

Related articles