Heim > Artikel > Web-Frontend > Verwenden Sie JavaScript und Tencent Maps, um die Abfragefunktion der umliegenden Einrichtungen auf der Karte zu implementieren

Verwenden Sie JavaScript und Tencent Maps, um die Abfragefunktion der umliegenden Einrichtungen auf der Karte zu implementieren

PHPzOriginal: 2023-11-21 15:53:141043Durchsuche

Verwenden Sie JavaScript und Tencent Maps, um die Abfragefunktion umliegender Einrichtungen auf der Karte zu implementieren

Mit der rasanten Entwicklung des Internets und mobiler Geräte haben Kartendienste in den letzten Jahren im Leben der Menschen immer mehr an Bedeutung gewonnen. Ob Reisenavigation, Abfragen umliegender Einrichtungen oder Standortfreigabe – Kartendienste spielen eine unverzichtbare Rolle. Unter vielen Kartendiensten ist Tencent Maps bei den meisten Nutzern wegen seiner präzisen Positionierung und umfangreichen Funktionen beliebt. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript und Tencent Maps die Abfragefunktion für die Umgebung der Karte implementieren und entsprechende Codebeispiele bereitstellen.

1. Vorbereitende Vorbereitungen
Bevor wir die Funktion zur Abfrage umliegender Einrichtungen auf der Karte implementieren, müssen wir zunächst einige Vorbereitungen treffen. Zuerst müssen wir ein Entwicklerkonto auf der offenen Plattform Tencent Maps registrieren und eine Anwendung erstellen. Die Registrierungsadresse lautet: https://lbs.qq.com/. Nach Abschluss der Registrierung können wir einen Entwicklerschlüssel (Key) erhalten, der zur Authentifizierung beim Aufruf der Tencent Map API verwendet wird.

2. Aufbau der HTML-Seite
Beim Aufbau der HTML-Seite müssen wir den relevanten Code der Tencent Maps JavaScript API einführen. Fügen Sie der HTML-Seite den folgenden Code hinzu:

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

Unter anderem muss Entwicklerschlüssel durch den tatsächlichen Schlüssel ersetzt werden, den Sie auf der Tencent Maps Open Platform erhalten haben. 开发者密钥 需要替换为你在腾讯地图开放平台上获取的实际密钥。

三、JavaScript代码的编写
在 JavaScript 代码中，我们将通过调用腾讯地图 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);
});

在这段代码中，首先创建了一个地图实例，并将其显示在页面上的 map 容器中。接着，通过调用 navigator.geolocation.getCurrentPosition() 方法获取用户的当前位置，并将地图中心点定位于用户所在位置。然后，在地图上添加了一个标记，标记用户当前位置。

最后，定义了一个 searchNearby() 函数，该函数接收一个关键词作为参数，并通过调用 qq.maps.SearchService 的 searchNearBy() 方法进行周边设施查询。查询范围为当前地图中心点附近1千米的区域。

为了触发地图查询，我们添加了一个搜索按钮，并通过 addEventListener 方法为其绑定了一个点击事件，该事件会调用 searchNearby()

3. JavaScript-Code schreiben

Im JavaScript-Code implementieren wir die Funktionen zur Karteninitialisierung, Positionierung und Abfrage der umgebenden Einrichtungen, indem wir die Tencent Map API aufrufen. Erstellen Sie eine script.js-Datei und kopieren Sie den folgenden Code hinein:
rrreee

In diesem Code wird zunächst eine Karteninstanz erstellt und in der map auf der Seite angezeigt. Code> Container. Ermitteln Sie als Nächstes den aktuellen Standort des Benutzers, indem Sie die Methode navigator.geolocation.getCurrentPosition() aufrufen und den Kartenmittelpunkt am Standort des Benutzers positionieren. Anschließend wird der Karte eine Markierung hinzugefügt, die den aktuellen Standort des Benutzers markiert.

Abschließend wird eine searchNearby()-Funktion definiert, die ein Schlüsselwort als Parameter erhält und searchNearBy() von <code>qq.maps.SearchService aufruft > Methode zur Abfrage umliegender Einrichtungen. Der Abfragebereich ist der Bereich 1 km in der Nähe der Mitte der aktuellen Karte.

🎜Um eine Kartenabfrage auszulösen, haben wir eine Suchschaltfläche hinzugefügt und über die Methode addEventListener ein Klickereignis daran gebunden, das die Funktion searchNearby() aufruft Operationen. Gleichzeitig richten wir für den Suchbutton ein Eingabefeld zur Eingabe von Suchbegriffen ein. 🎜🎜4. Effektdemonstration🎜Nach Abschluss des obigen Codeschreibens aktualisieren wir die Seite und sehen eine auf Tencent Maps basierende Karte auf der Seite. Darüber hinaus wird der Mittelpunkt der Karte automatisch am Standort des aktuellen Benutzers positioniert. Zu diesem Zeitpunkt können wir Schlüsselwörter (z. B. Restaurants, Banken, Schulen usw.) in das Eingabefeld eingeben und dann auf die Suchschaltfläche klicken, um Markierungen für nahegelegene Einrichtungen mit entsprechenden Schlüsselwörtern auf der Karte anzuzeigen. 🎜🎜Zusammenfassung🎜In diesem Artikel wird erläutert, wie Sie mit JavaScript und Tencent Maps die Abfragefunktion für die Umgebungskarte von Einrichtungen implementieren. Durch Aufrufen der Tencent Map API können wir Karten einfach auf der Seite anzeigen und Benutzern praktische Kartendienste bereitstellen, indem wir den aktuellen Standort des Benutzers ermitteln und nach umliegenden Einrichtungen suchen. Ich hoffe, dieser Artikel ist hilfreich für Sie und jeder ist herzlich eingeladen, ihn auszuprobieren und auf Ihre eigenen Projekte anzuwenden. 🎜

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript und Tencent Maps, um die Abfragefunktion der umliegenden Einrichtungen auf der Karte zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html map JS 事件 https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie JS und Baidu Maps, um die Funktion zum Umschalten der Kartensatellitenebene zu implementierenNächster Artikel：So verwenden Sie JS und Baidu Maps, um die Funktion zum Umschalten der Kartensatellitenebene zu implementieren

In Verbindung stehende Artikel

Mehr sehen