JavaScriptとTencent Mapsを利用して地図徒歩ナビゲーション機能を実装-jsチュートリアル-php.cn

JavaScriptとTencent Mapsを利用して地図徒歩ナビゲーション機能を実装

WBOY

リリース： 2023-11-21 17:06:54

オリジナル

1138 人が閲覧しました

JavaScriptとTencent Mapsを利用して地図徒歩ナビゲーション機能を実装

JavaScript と Tencent Maps を使用して地図ウォーキングナビゲーション機能を実装する

はじめに:
モバイルインターネットの急速な発展に伴い、ナビゲーション機能は人々にとって重要になってきました。旅行用の補助ツール。 Web アプリケーションやモバイルアプリケーションでは、ユーザーが目的地を正確に見つけられるようにマップナビゲーションを使用することがよくあります。この記事では、JavaScript と Tencent Map API を使用して地図ウォーキングナビゲーション機能を実装する方法を紹介し、読者がこの機能の実装方法を理解できるように具体的なコード例を示します。

1. 準備作業
コードを書き始める前に、いくつかの必要な作業を準備する必要があります:

Tencent Map API キー: Tencent オープンプラットフォームに適用する必要があります。 Tencent マップサービスにアクセスするために使用される API キー。キーの申請方法は、Tencent Open Platform の公式ドキュメントに記載されています。
HTML ページと JavaScript ファイル: マップをロードするための HTML ページを作成し、ナビゲーション機能を実装するために対応する JavaScript コードを記述する必要があります。

2. HTML ページを作成する
まず、HTML ページを作成し、Tencent Map API の JavaScript ファイルを導入します:

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

ログイン後にコピー

注: YOUR_API_KEY を実際に使用したものに置き換えます。 Tencent Maps API キーに適用されました。

3. JavaScript コードの記述
次に、別の JavaScript ファイル navigate.js にコードを記述して、マップの読み込みおよびナビゲーション機能を実装します:

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. コード分析

navigate(): ナビゲーション関数は、ブラウザの地理的測位関数を呼び出すことにより、現在位置の経度および緯度を取得し、地図上に表示します。
getPositionSuccess(position): 地理的位置の成功コールバック関数を取得し、現在の位置を地図の中心に設定し、現在の位置を表すマーカーを作成します。次に、Tencent Maps の WalkingService オブジェクトを徒歩ナビゲーションに使用し、始点と終点の座標を設定し、search() メソッドを呼び出して検索します。
getPositionError(error): 地理的位置の取得に失敗した場合のコールバック関数。さまざまなエラーコードを処理し、対応するプロンプトを表示します。

5. 効果を実感してください

ブラウザでHTMLページを開き、「ナビゲーション開始」ボタンをクリックすると、徒歩ナビゲーション機能が起動します。ナビゲーションが完了すると、ルートリストが表示されます。各ステップはナビゲーションのセクションを表し、ユーザーは必要に応じてそれを表示できます。

概要:

JavaScript と Tencent Map API を介して、Web ページに地図のウォーキングナビゲーション機能を簡単に実装できます。読者は、実装されたコードを自分のニーズに応じて変更およびカスタマイズして、より良いユーザーエクスペリエンスとインタラクション効果を得ることができます。同時に、Tencent Map API を使用する場合は、コードの合法性と安定性を確保するために、合理的な使用に注意し、関連するサービス契約に従う必要もあります。この記事の内容が読者にインスピレーションを与え、役立つことを願っています。

以上がJavaScriptとTencent Mapsを利用して地図徒歩ナビゲーション機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。