Home >Web Front-end >JS Tutorial >Use JavaScript and Tencent Maps to implement the query function of surrounding facilities on the map

Use JavaScript and Tencent Maps to implement the query function of surrounding facilities on the map

PHPzOriginal: 2023-11-21 15:53:141138browse

Using JavaScript and Tencent Maps to realize the query function of surrounding facilities on the map

In recent years, with the rapid development of the Internet and mobile devices, map services have become more important in people’s lives. Sex is increasing day by day. Whether it is travel navigation, surrounding facility inquiries or location sharing, map services play an indispensable role. Among many map services, Tencent Maps is loved by the majority of users for its precise positioning and rich functions. This article will introduce how to use JavaScript and Tencent Maps to implement the map surrounding facility query function, and provide corresponding code examples.

1. Preparatory work
Before implementing the query function of surrounding facilities on the map, we need to do some preparatory work first. First, we need to register a developer account on the Tencent Maps open platform and create an application. The registration address is: https://lbs.qq.com/. After the registration is completed, we can obtain a developer key (key), which is used for authentication when calling the Tencent Map API.

2. Building the HTML page
When building the HTML page, we need to introduce the relevant code of the Tencent Map JavaScript API. Add the following code to the HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图周边设施查询</title>
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script src="https://map.qq.com/api/js?v=2.exp&key=开发者密钥"></script>
    <script src="script.js"></script>
</body>
</html>

Among them, Developer Key needs to be replaced with the actual key you obtained on the Tencent Map Open Platform.

3. Writing JavaScript code
In the JavaScript code, we will implement the map initialization, positioning and surrounding facility query functions by calling the Tencent Map API. Create a script.js file and copy the following code into it:

// 创建地图实例
var map = new qq.maps.Map(document.getElementById("map"), {
    zoom: 13, // 设置地图缩放级别
});

// 获取用户当前位置
navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude; // 获取纬度
    var lng = position.coords.longitude; // 获取经度

    // 将地图中心点设置为用户当前位置
    map.setCenter(new qq.maps.LatLng(lat, lng));

    // 在地图上添加当前位置的标记
    new qq.maps.Marker({
        position: new qq.maps.LatLng(lat, lng),
        map: map,
    });
});

// 在地图上进行周边设施查询
function searchNearby(keyword) {
    var service = new qq.maps.SearchService({
        map: map,
    });

    // 根据关键词进行周边查询
    service.searchNearBy(keyword, map.getCenter(), 1000);
}

// 为搜索按钮绑定事件
document.getElementById("search-btn").addEventListener("click", function() {
    var keyword = document.getElementById("search-input").value;
    searchNearby(keyword);
});

In this code, a map instance is first created and displayed on the page map in the container. Then, get the user's current location by calling the navigator.geolocation.getCurrentPosition() method, and position the map center point at the user's location. Then, a marker is added to the map marking the user's current location.

Finally, a searchNearby() function is defined, which receives a keyword as a parameter and calls searchNearBy of qq.maps.SearchService () method to query surrounding facilities. The query range is the area 1 km near the center of the current map.

In order to trigger the map query, we added a search button and bound a click event to it through the addEventListener method, which will call searchNearby() function to perform query operations. At the same time, we set up an input box for the search button to enter search keywords.

4. Effect Demonstration
After completing the above code writing, we refresh the page and see a map based on Tencent Maps displayed on the page. Moreover, the center point of the map will be automatically positioned to the current user's location. At this time, we can enter keywords (such as restaurants, banks, schools, etc.) in the input box, and then click the search button to see nearby facility markers with corresponding keywords on the map.

Summary
This article introduces how to use JavaScript and Tencent Maps to implement the map surrounding facility query function. By calling the Tencent Map API, we can easily display maps on the page and provide users with convenient map services by obtaining the user's current location and searching for surrounding facilities. I hope this article is helpful to you, and everyone is welcome to try it and apply it to your own projects.

The above is the detailed content of Use JavaScript and Tencent Maps to implement the query function of surrounding facilities on the map. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html map JS 事件 https

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：How to use JS and Baidu Maps to implement map satellite layer switching functionNext article：How to use JS and Baidu Maps to implement map satellite layer switching function

See more

Use JavaScript and Tencent Maps to implement the query function of surrounding facilities on the map

Related articles