Maison >interface Web >js tutoriel >Utilisation de JavaScript et de Tencent Maps pour implémenter la fonction de navigation à pied sur carte

Utilisation de JavaScript et de Tencent Maps pour implémenter la fonction de navigation à pied sur carte

WBOYoriginal: 2023-11-21 17:06:541139parcourir

Introduction :
Avec le développement rapide de l'Internet mobile, les fonctions de navigation sont devenues un outil auxiliaire important pour les voyages. Dans les applications Web et mobiles, nous utilisons souvent la navigation cartographique pour guider les utilisateurs et trouver avec précision leur destination. Cet article expliquera comment utiliser JavaScript et l'API Tencent Maps pour implémenter la fonction de navigation à pied sur la carte et fournira des exemples de code spécifiques pour aider les lecteurs à comprendre comment implémenter cette fonction.

1. Préparation
Avant de commencer à écrire du code, nous devons préparer certains travaux nécessaires :

Clé API Tencent Map : Nous devons demander une clé API sur la plate-forme ouverte Tencent pour accéder aux services Tencent Map. La méthode de demande de clé peut être trouvée dans la documentation officielle de Tencent Open Platform.
Page HTML et fichier JavaScript : Nous devons créer une page HTML pour charger la carte et écrire le code JavaScript correspondant pour implémenter la fonction de navigation.

2. Créer une page HTML
Tout d'abord, nous créons une page HTML et introduisons le fichier JavaScript de l'API Tencent Map :

<!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>

Remarque : Remplacez YOUR_API_KEY par la clé API Tencent Map pour laquelle vous avez postulé.

3. Écrivez du code JavaScript
Ensuite, nous écrivons du code dans un fichier JavaScript séparé naviguer.js pour implémenter les fonctions de chargement et de navigation de la carte :

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. Analyse du code

initMap() : Initialiser la fonction de carte, crée un objet cartographique et l'affiche dans le conteneur mapContainer sur la page.
navigate() : La fonction de navigation, en appelant la fonction de géolocalisation du navigateur, obtient la longitude et la latitude de l'emplacement actuel et les affiche sur la carte.
getPositionSuccess(position) : obtenez la fonction de rappel de réussite de la localisation géographique, définissez la position actuelle comme centre de la carte et créez un marqueur pour représenter la position actuelle. Utilisez ensuite l'objet WalkingService de Tencent Maps pour la navigation à pied, définissez les coordonnées du point de départ et du point final, puis appelez la méthode search() pour effectuer la recherche.
getPositionError(error) : fonction de rappel en cas d'échec de l'obtention de la localisation géographique, gestion de différents codes d'erreur et affichage des invites correspondantes.

5. Implémentez l'effet
Ouvrez la page HTML dans le navigateur et cliquez sur le bouton "Démarrer la navigation" pour déclencher la fonction de navigation piétonne. Une fois la navigation terminée, une liste d'itinéraires s'affichera, dont chaque étape représente une section de la navigation, et l'utilisateur pourra la visualiser selon ses besoins.

Résumé :
Grâce à JavaScript et à l'API Tencent Map, nous pouvons facilement implémenter la fonction de navigation à pied de la carte dans la page Web. Les lecteurs peuvent modifier et personnaliser le code implémenté en fonction de leurs propres besoins pour obtenir une meilleure expérience utilisateur et des effets d'interaction. Dans le même temps, lorsque vous utilisez l'API Tencent Map, vous devez également faire attention à une utilisation raisonnable et vous conformer aux accords de service pertinents pour garantir la légalité et la stabilité du code. J'espère que le contenu de cet article pourra inspirer et aider les lecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html Error 回调函数 JS 对象 position

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JS et Baidu Maps pour implémenter la fonction de lecture de piste cartographiqueArticle suivant：Comment utiliser JS et Baidu Maps pour implémenter la fonction de lecture de piste cartographique

Articles Liés

Voir plus