Maison >interface Web >js tutoriel >Utilisez JavaScript et Tencent Maps pour implémenter la fonction de requête des installations environnantes sur la carte

Utilisez JavaScript et Tencent Maps pour implémenter la fonction de requête des installations environnantes sur la carte

PHPzoriginal: 2023-11-21 15:53:141136parcourir

Ces dernières années, avec le développement rapide d'Internet et des appareils mobiles, les services de cartographie sont devenus de plus en plus importants dans la vie des gens. Qu'il s'agisse de navigation de voyage, de demandes d'informations sur les installations environnantes ou de partage de localisation, les services de cartographie jouent un rôle indispensable. Parmi les nombreux services de cartographie, Tencent Maps est apprécié par la majorité des utilisateurs pour son positionnement précis et ses fonctions riches. Cet article explique comment utiliser JavaScript et Tencent Maps pour implémenter la fonction de requête de carte entourant les installations et fournit des exemples de code correspondants.

1. Préparatifs préliminaires
Avant de mettre en œuvre la fonction d'interrogation des installations environnantes sur la carte, nous devons d'abord faire quelques préparatifs. Tout d’abord, nous devons enregistrer un compte développeur sur la plateforme ouverte Tencent Maps et créer une application. L'adresse d'inscription est : https://lbs.qq.com/. Une fois l'enregistrement terminé, nous pouvons obtenir une clé de développeur (clé), qui est utilisée pour l'authentification lors de l'appel de l'API Tencent Map.

2. Construction de la page HTML
Lors de la construction de la page HTML, nous devons introduire le code pertinent de l'API JavaScript Tencent Maps. Ajoutez le code suivant à la page 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>

Parmi eux, la Developer Key doit être remplacée par la clé réelle que vous avez obtenue sur la plateforme ouverte Tencent Map. 开发者密钥 需要替换为你在腾讯地图开放平台上获取的实际密钥。

三、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. Écriture de code JavaScript

Dans le code JavaScript, nous implémenterons les fonctions d'initialisation de la carte, de positionnement et de requête des installations environnantes en appelant l'API Tencent Map. Créez un fichier script.js et copiez-y le code suivant :
rrreee

Dans ce code, une instance de carte est d'abord créée et affichée dans la map de la page. code> conteneur. Ensuite, obtenez l'emplacement actuel de l'utilisateur en appelant la méthode navigator.geolocation.getCurrentPosition() et positionnez le point central de la carte à l'emplacement de l'utilisateur. Ensuite, un marqueur est ajouté à la carte marquant l'emplacement actuel de l'utilisateur.

Enfin, une fonction searchNearby() est définie, qui reçoit un mot-clé en paramètre et appelle searchNearBy() de <code>qq.maps.SearchService méthode pour interroger les installations environnantes. La plage de requête est la zone située à 1 km près du centre de la carte actuelle.

🎜Afin de déclencher une requête de carte, nous avons ajouté un bouton de recherche et y avons lié un événement de clic via la méthode addEventListener, qui appellera la fonction searchNearby() Query. opérations. Dans le même temps, nous avons configuré une zone de saisie pour le bouton de recherche afin de saisir les mots-clés de recherche. 🎜🎜4. Démonstration de l'effet🎜Après avoir terminé l'écriture du code ci-dessus, nous actualisons la page et voyons une carte basée sur Tencent Maps affichée sur la page. De plus, le point central de la carte sera automatiquement positionné à l'emplacement actuel de l'utilisateur. À ce stade, nous pouvons saisir des mots-clés (tels que restaurants, banques, écoles, etc.) dans la zone de saisie, puis cliquer sur le bouton de recherche pour voir les marqueurs d'installations à proximité avec les mots-clés correspondants sur la carte. 🎜🎜Résumé🎜Cet article explique comment utiliser JavaScript et Tencent Maps pour implémenter la fonction de requête de carte entourant les installations. En appelant l'API Tencent Map, nous pouvons facilement afficher des cartes sur la page et fournir aux utilisateurs des services de cartographie pratiques en obtenant l'emplacement actuel de l'utilisateur et en recherchant les installations environnantes. J'espère que cet article vous sera utile et que tout le monde est invité à l'essayer et à l'appliquer à vos propres projets. 🎜

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!

JavaScript html map JS 事件 https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JS et Baidu Maps pour implémenter la fonction de commutation de couche satellite de carteArticle suivant：Comment utiliser JS et Baidu Maps pour implémenter la fonction de commutation de couche satellite de carte

Articles Liés

Voir plus