ホームページ > 記事 > ウェブフロントエンド > JavaScriptとTencent Mapsを利用した地図ルート計画機能を実装
JavaScript と Tencent Maps を使用して地図ルート計画機能を実装
テクノロジーの発展に伴い、オンライン地図サービスは徐々に私たちの日常生活における重要なツールの 1 つになりました。その中でも、Tencent Maps は、中国の大手オンライン地図サービスプロバイダーとして、強力な機能と豊富なデータリソースを備えています。この記事では、JavaScript と Tencent Maps を使用して地図ルート計画機能を実装する方法と、具体的なコード例を紹介します。
まず、Tencent Map JavaScript API を導入し、初期化設定を行う必要があります。 HTML ドキュメントには、次のコードを追加する必要があります。
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
このうち、YOUR_KEY は、Tencent Map Open Platform で申請した API キーに置き換える必要があります。次に、JavaScript コードでマップを初期化し、マップ表示用のコンテナを取得します。コードは次のとおりです。
// 初始化地图 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("路线规划失败,请重试!"); });
上記のコードでは、qq.maps.Map クラスを使用してマップ インスタンスを作成し、マップ表示用のコンテナとして DOM 要素を渡します。 qq.maps.DrivingService クラスはルート計画に使用され、setComplete メソッドと setError メソッドを呼び出すことで、ルート計画が完了または失敗したときにコールバック関数が設定されます。
次に、ルート計画操作をトリガーする関数を作成します。コードは次のとおりです。
function searchRoute(start, end) { // 设置起点和终点 routeService.setLocation(new qq.maps.LatLng(start.lat, start.lng), new qq.maps.LatLng(end.lat, end.lng)); // 发起路线规划请求 routeService.search(); }
関数では、routeService の setLocation メソッドを呼び出して、始点と終点の座標を設定します。次に、検索メソッドを呼び出してルート計画リクエストを開始します。
最後に、ページ上に出発地と目的地の入力ボックスを追加し、ルート計画操作をトリガーするボタンを追加できます。コードは次のとおりです。
<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>
JavaScript コードでは、入力ボックスの値を取得し、ルート計画のために searchRoute 関数を呼び出すことができます。完全なコードは次のとおりです。
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 }; }
getLocation 関数では、Tencent Maps の位置検索サービスまたはその他のジオコーディング サービスを使用して、地名に基づいて座標を取得できます。サンプルコードでは固定座標を直接返しています。
上記のコード例を通じて、JavaScript と Tencent Maps を使用して地図ルート計画の機能を実装できます。読者は、実際のニーズに応じてコードを拡張および最適化し、より複雑なアプリケーション シナリオに適応できます。
以上がJavaScriptとTencent Mapsを利用した地図ルート計画機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。