JavaScriptとTencent Mapsを利用して地図上に周辺施設のクエリ機能を実装-jsチュートリアル-php.cn

JavaScriptとTencent Mapsを利用して地図上に周辺施設のクエリ機能を実装

PHPz

リリース： 2023-11-21 15:53:14

オリジナル

1102 人が閲覧しました

JavaScriptとTencent Mapsを利用して地図上に周辺施設のクエリ機能を実装

JavaScriptとTencent Mapsを活用し、地図上で周辺施設のクエリ機能を実現

近年、インターネットやモバイルデバイスの急速な発展に伴い、地図上での周辺施設の検索機能を実現人々の生活においてサービスの重要性が高まっており、セックスは日に日に増加しています。旅行のナビゲーションや周辺施設の問い合わせ、位置情報の共有など、地図サービスは欠かせない役割を果たしています。数ある地図サービスの中でも、Tencent Maps は正確な位置情報と豊富な機能で大多数のユーザーに愛されています。この記事では、JavaScript と Tencent Maps を使用して施設周辺地図クエリ機能を実装する方法と、対応するコード例を紹介します。

1. 準備作業
地図上に周辺施設のクエリ機能を実装する前に、まず準備作業を行う必要があります。まず、Tencent Maps オープンプラットフォームに開発者アカウントを登録し、アプリケーションを作成する必要があります。登録アドレスは https://lbs.qq.com/ です。登録が完了すると、Tencent Map APIを呼び出す際の認証に使用される開発者キー（キー）を取得できます。

2. HTML ページの構築
HTML ページを構築するときは、Tencent Map JavaScript API の関連コードを導入する必要があります。次のコードを HTML ページに追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图周边设施查询</title>
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script src="https://map.qq.com/api/js?v=2.exp&key=开发者密钥"></script>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

このうち、Developer Key は、Tencent Map Open Platform で取得した実際のキーに置き換える必要があります。

3. JavaScript コードの記述
JavaScript コードでは、Tencent Map API を呼び出して地図の初期化、位置決め、周辺施設のクエリ関数を実装します。 script.js ファイルを作成し、次のコードをそのファイルにコピーします。

// 创建地图实例
var map = new qq.maps.Map(document.getElementById("map"), {
    zoom: 13, // 设置地图缩放级别
});

// 获取用户当前位置
navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude; // 获取纬度
    var lng = position.coords.longitude; // 获取经度

    // 将地图中心点设置为用户当前位置
    map.setCenter(new qq.maps.LatLng(lat, lng));

    // 在地图上添加当前位置的标记
    new qq.maps.Marker({
        position: new qq.maps.LatLng(lat, lng),
        map: map,
    });
});

// 在地图上进行周边设施查询
function searchNearby(keyword) {
    var service = new qq.maps.SearchService({
        map: map,
    });

    // 根据关键词进行周边查询
    service.searchNearBy(keyword, map.getCenter(), 1000);
}

// 为搜索按钮绑定事件
document.getElementById("search-btn").addEventListener("click", function() {
    var keyword = document.getElementById("search-input").value;
    searchNearby(keyword);
});

ログイン後にコピー

このコードでは、最初にマップインスタンスが作成され、ページ マップ に表示されます。コンテナ。次に、navigator.geolocation.getCurrentPosition() メソッドを呼び出してユーザーの現在位置を取得し、地図の中心点をユーザーの位置に配置します。次に、ユーザーの現在位置を示すマーカーが地図に追加されます。

最後に、searchNearby() 関数が定義されています。この関数はキーワードをパラメータとして受け取り、qq.maps.SearchService ()# の searchNearBy を呼び出します。 ## 周囲の施設を問い合わせるメソッド。クエリ範囲は、現在の地図の中心付近 1 km のエリアです。

マップクエリをトリガーするために、検索ボタンを追加し、

addEventListener メソッドを通じて検索ボタンにクリックイベントをバインドしました。このメソッドは、searchNearby() 関数を呼び出します。クエリ操作を実行します。同時に、検索ボタンに検索キーワードを入力するための入力ボックスを設置しました。

4. 効果のデモ

上記のコードの作成が完了したら、ページを更新すると、Tencent Maps に基づく地図がページ上に表示されます。さらに、地図の中心点は現在のユーザーの位置に自動的に配置されます。このとき、入力ボックスにキーワード（レストラン、銀行、学校など）を入力し、検索ボタンをクリックすると、対応するキーワードを含む近くの施設マーカーが地図上に表示されます。

概要

この記事では、JavaScript と Tencent Maps を使用して施設周辺地図クエリ機能を実装する方法を紹介します。 Tencent Map APIを呼び出すことで、ページ上に簡単に地図を表示でき、ユーザーの現在位置の取得や周辺施設の検索など便利な地図サービスをユーザーに提供します。この記事があなたのお役に立てれば幸いです。ぜひ皆さんも試してみて、自分のプロジェクトに適用してみてください。

以上がJavaScriptとTencent Mapsを利用して地図上に周辺施設のクエリ機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。