Implémenter la fonction de planification d'itinéraire sur carte à l'aide de JavaScript et Tencent Maps

Utilisez JavaScript et Tencent Maps pour mettre en œuvre la fonction de planification d'itinéraire sur carte

Avec le développement de la technologie, les services de cartes en ligne sont progressivement devenus l'un des outils importants de notre vie quotidienne. Parmi eux, Tencent Maps, en tant que principal fournisseur de services de cartographie en ligne en Chine, dispose de fonctions puissantes et de riches ressources de données. Cet article expliquera comment utiliser JavaScript et Tencent Maps pour implémenter des fonctions de planification d'itinéraire sur carte et donnera des exemples de code spécifiques.

Tout d'abord, nous devons présenter l'API JavaScript Tencent Map et effectuer les paramètres d'initialisation. Dans le document HTML, nous devons ajouter le code suivant :

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

Parmi eux, YOUR_KEY doit être remplacé par la clé API que vous avez demandée sur la plateforme ouverte Tencent Map. Ensuite, nous pouvons initialiser la carte dans le code JavaScript et obtenir le conteneur pour l'affichage de la carte. Le code est le suivant :

// 初始化地图
var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.90886, 116.39739), // 地图中心点的位置
    zoom: 12 // 地图缩放级别
});

// 获取路线规划服务
var routeService = new qq.maps.DrivingService();

// 设置路线规划完成后的回调函数
routeService.setComplete(function(result) {
    // 清除之前的路线
    map.clearOverlays();
    
    // 获取路线规划结果
    var route = result.detail.routes[0];
    
    // 绘制路线
    var polyline = new qq.maps.Polyline({
        path: route.polyline,
        strokeColor: '#3366FF',
        strokeWeight: 5,
        map: map
    });
    
    // 显示起点
    new qq.maps.Marker({
        position: route.start,
        map: map
    });
    
    // 显示终点
    new qq.maps.Marker({
        position: route.end,
        map: map
    });
    
    // 调整地图视野，使路线可见
    map.fitBounds(polyline.getBounds());
});

// 设置路线规划失败后的回调函数
routeService.setError(function() {
    alert("路线规划失败，请重试！");
});

Dans le code ci-dessus, nous utilisons la classe qq.maps.Map pour créer une instance de carte et transmettre un élément DOM comme conteneur pour l'affichage de la carte. La classe qq.maps.DrivingService est utilisée pour la planification d'itinéraire En appelant les méthodes setComplete et setError, les fonctions de rappel sont définies lorsque la planification d'itinéraire est terminée ou a échoué.

Ensuite, nous pouvons écrire une fonction qui déclenche l'opération de planification d'itinéraire. Le code est le suivant :

function searchRoute(start, end) {
    // 设置起点和终点
    routeService.setLocation(new qq.maps.LatLng(start.lat, start.lng), new qq.maps.LatLng(end.lat, end.lng));
    
    // 发起路线规划请求
    routeService.search();
}

Dans la fonction, nous définissons les coordonnées des points de départ et d'arrivée en appelant la méthode setLocation de routeService. Ensuite, appelez la méthode de recherche pour lancer une demande de planification d’itinéraire.

Enfin, nous pouvons ajouter des zones de saisie pour le point de départ et le point d'arrivée sur la page, et ajouter un bouton pour déclencher l'opération de planification d'itinéraire. Le code est le suivant :

<div>
    起点：<input type="text" id="start">
    终点：<input type="text" id="end">
    <button onclick="search()">搜索</button>
</div>
<div id="map" style="width: 800px; height: 600px;"></div>

Dans le code JavaScript, on peut récupérer la valeur dans la zone de saisie et appeler la fonction searchRoute pour les opérations de planification d'itinéraire. Le code complet est le suivant :

function search() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    
    if (start && end) {
        searchRoute(getLocation(start), getLocation(end));
    } else {
        alert("请输入起点和终点！");
    }
}

// 通过地名获取坐标
function getLocation(address) {
    // TODO: 根据地名获取坐标，可以使用腾讯地图的地点搜索服务，或者其他地理编码服务
    
    // 示例：直接返回一个坐标
    return {
        lat: 39.90886,
        lng: 116.39739
    };
}

Dans la fonction getLocation, nous pouvons utiliser le service de recherche de localisation de Tencent Maps ou d'autres services de géocodage pour obtenir des coordonnées basées sur des noms de lieux. Dans l’exemple de code, nous renvoyons directement une coordonnée fixe.

Grâce aux exemples de code ci-dessus, nous pouvons implémenter la fonction de planification d'itinéraire sur carte à l'aide de JavaScript et Tencent Maps. Les lecteurs peuvent développer et optimiser le code en fonction des besoins réels pour s'adapter à des scénarios d'application plus complexes.

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!