Home > Article > Web Front-end > Using JavaScript and Tencent Maps to implement map walking navigation function

Using JavaScript and Tencent Maps to implement map walking navigation function

WBOYOriginal: 2023-11-21 17:06:541094browse

Introduction:
With the rapid development of the mobile Internet, navigation functions have become important for people to travel Auxiliary tools. In web and mobile applications, we often use map navigation to guide users to accurately find their destination. This article will introduce how to use JavaScript and Tencent Map API to implement the map walking navigation function, and provide specific code examples to help readers understand how to implement this function.

1. Preparation work
Before we start writing code, we need to prepare some necessary work:

Tencent Map API key: We need to apply on the Tencent Open Platform API key, used to access Tencent map services. The method of applying for a key can be found in the official documentation of Tencent Open Platform.
HTML page and JavaScript file: We need to create an HTML page to load the map and write the corresponding JavaScript code to implement the navigation function.

2. Create an HTML page
First, we create an HTML page and introduce the JavaScript file of Tencent Map API:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图步行导航</title>
    <script src="http://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>
</head>
<body>
    <div id="mapContainer" style="width: 100%; height: 500px;"></div>
    <button onclick="navigate()">开始导航</button>
    <div id="resultContainer"></div>
    <script src="navigate.js"></script>
</body>
</html>

Note: Replace YOUR_API_KEY with the one you applied for Tencent Maps API key.

3. Writing JavaScript code
Next, we write code in a separate JavaScript file navigate.js to implement the loading and navigation functions of the map:

var map;
var marker;
var walking;

// 初始化地图
function initMap() {
    map = new qq.maps.Map(document.getElementById("mapContainer"), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 北京中心点坐标
        zoom: 13 // 缩放级别
    });
}

// 导航函数
function navigate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError);
    } else {
        alert("浏览器不支持地理位置定位");
    }
}

// 获取地理位置成功回调函数
function getPositionSuccess(position) {
    var lat = position.coords.latitude; // 纬度
    var lng = position.coords.longitude; // 经度

    var currentPosition = new qq.maps.LatLng(lat, lng);
    marker = new qq.maps.Marker({
        position: currentPosition,
        map: map
    });

    map.setCenter(currentPosition); // 设置地图中心点
    map.setZoom(16); // 设置缩放级别

    walking = new qq.maps.WalkingService({
        map: map
    });

    walking.setPolicy(qq.maps.WalkingPolicy.LEAST_TIME);

    walking.search(new qq.maps.LatLng(lat, lng), new qq.maps.LatLng(39.908692, 116.397477)); // 设置起点和终点坐标

    qq.maps.event.addListener(walking, 'complete', function(result) {
        var steps = result.detail.pois;
        var html = "";
        for (var i = 0; i < steps.length; i++) {
            html += steps[i].name + "<br>";
        }
        document.getElementById('resultContainer').innerHTML = html;
    });
}

// 获取地理位置失败回调函数
function getPositionError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            alert("用户拒绝地理位置请求");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("无法获取当前位置信息");
            break;
        case error.TIMEOUT:
            alert("获取位置超时");
            break;
        case error.UNKNOWN_ERROR:
            alert("未知错误");
            break;
    }
}

window.onload = initMap;

4. Code analysis

initMap(): Initialize the map function, create a map object and display it in the mapContainer container on the page.
navigate(): Navigation function, by calling the browser's geographical positioning function, obtains the current location's longitude and latitude and displays it on the map.
getPositionSuccess(position): Get the geographical location success callback function, set the current location to the center of the map, and create a marker to represent the current location. Then use the WalkingService object of Tencent Maps for walking navigation, set the starting point and end point coordinates, and then call the search() method to search.
getPositionError(error): Callback function for failure to obtain geographical location, handle different error codes and give corresponding prompts.

5. Realize the effect
Open the HTML page in the browser and click the "Start Navigation" button to trigger the walking navigation function. After the navigation is completed, a route list will be displayed, each step of which represents a section of the navigation, and the user can view it as needed.

Summary:
Through JavaScript and Tencent Map API, we can easily implement the walking navigation function of the map in the web page. Readers can modify and customize the implemented code according to their own needs to obtain better user experience and interaction effects. At the same time, when using Tencent Map API, you also need to pay attention to reasonable use and comply with relevant service agreements to ensure the legality and stability of the code. I hope the content of this article can inspire and help readers.

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

JavaScript html Error 回调函数 JS 对象 position

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

See more

Using JavaScript and Tencent Maps to implement map walking navigation function

Related articles