Comment utiliser JS et Baidu Maps pour implémenter la personnalisation de la fenêtre d'informations cartographiques-js tutoriel-php.cn

Comment utiliser JS et Baidu Maps pour implémenter la personnalisation de la fenêtre d'informations cartographiques

PHPz

Libérer： 2023-11-21 13:38:24

original

1218 Les gens l'ont consulté

Comment utiliser JS et Baidu Maps pour implémenter la personnalisation de la fenêtre dinformations cartographiques

Comment utiliser JS et Baidu Map pour implémenter la personnalisation de la fenêtre d'informations cartographiques

Baidu Map est un service de carte Web couramment utilisé qui peut afficher des informations géographiques et fournir des fonctions interactives associées sur des pages Web. Parmi elles, la fenêtre d'informations cartographiques est une fonction courante utilisée pour afficher des informations détaillées sur un emplacement spécifié sur la carte. Cet article explique comment utiliser JS et Baidu Maps pour implémenter des fonctions personnalisées de la fenêtre d'informations cartographiques et fournit des exemples de code spécifiques.

Avant de commencer, nous devons nous assurer que nous avons demandé un compte développeur Baidu Maps et obtenu la clé API correspondante. Ensuite, nous implémenterons étape par étape la fonction de personnalisation de la fenêtre d’informations cartographiques.

(1) Présentez l'API Baidu Map et les ressources associées

Tout d'abord, présentez l'API JavaScript et les ressources de style de Baidu Map en en-tête de la page. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图信息窗口自定义功能</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script>
    <link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
</body>
</html>

Copier après la connexion

Veuillez remplacer "your_api_key" dans le code ci-dessus par la clé API Baidu Map que vous avez demandée.

(2) Créez un conteneur de carte et initialisez la carte

Ensuite, créez un conteneur div avec l'identifiant "map" dans la balise body de la page pour afficher la carte. Ensuite, une fois le chargement de la page terminé, utilisez le code JavaScript pour initialiser la carte. L'exemple de code est le suivant :

<script type="text/javascript">
    var map = new BMap.Map("map");  // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);  // 定义地图中心点的经纬度坐标
    map.centerAndZoom(point, 15);  // 设置地图的中心点和缩放级别

    map.enableScrollWheelZoom(true);  // 启用地图滚轮缩放功能
</script>

Copier après la connexion

Avec le code ci-dessus, nous avons réussi à créer une instance de carte et à définir le point central et le niveau de zoom de la carte. De plus, nous avons activé le zoom par roue pour la carte.

(3) Fenêtre d'informations cartographiques personnalisées

Ensuite, nous utiliserons le plug-in InfoBox fourni par Baidu Maps pour implémenter une fenêtre d'informations cartographiques personnalisée. Tout d’abord, nous devons créer un objet InfoBox et définir les éléments de configuration associés. L'exemple de code est le suivant :

<script type="text/javascript">
    var myInfoBox = new BMapLib.InfoBox(map, "自定义信息窗口内容", {
        boxStyle: {
            width: "200px",
            height: "100px",
            background: "#fff",
            borderRadius: "5px",
            padding: "10px"
        },
        closeIconMargin: "1px 1px 0 0",
        enableAutoPan: true,
        align: INFOBOX_AT_TOP
    });

    // 定义一个marker，并为marker添加点击事件
    var marker = new BMap.Marker(point);
    marker.addEventListener("click", function(){
        myInfoBox.open(marker);
    });
    
    map.addOverlay(marker);  // 将marker添加到地图中
</script>

Copier après la connexion

Dans le code ci-dessus, nous créons une instance InfoBox nommée myInfoBox et définissons le style de la fenêtre, la position de réglage automatique et la position du bouton de fermeture via les éléments de configuration associés. Ensuite, nous avons ajouté un événement de clic pour un marqueur Lorsque vous cliquez sur le marqueur, une fenêtre d'informations personnalisée s'ouvre. Enfin, nous ajoutons des marqueurs à la carte.

À ce stade, nous avons implémenté avec succès la fonction de personnalisation de la fenêtre d'informations cartographiques. Vous pouvez ajuster le style et le contenu de l'InfoBox en fonction de vos propres besoins.

Résumé :

Cet article explique comment utiliser JS et Baidu Maps pour implémenter des fonctions personnalisées de la fenêtre d'informations cartographiques. En introduisant l'API Baidu Map et les ressources associées, créez un conteneur de carte et utilisez JavaScript pour initialiser la carte. Ensuite, en utilisant le plug-in InfoBox de Baidu Map, nous avons implémenté une fenêtre d'informations cartographiques personnalisée et ajouté un événement de clic pour que le marqueur déclenche l'affichage de la fenêtre.

Si vous avez d'autres besoins, vous pouvez également étendre la fenêtre d'informations cartographiques et les fonctions interactives associées via d'autres fonctions fournies par Baidu Maps. J'espère que cet article pourra vous être utile et je vous souhaite du succès dans le développement de cartes !

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser JS et Baidu Maps pour implémenter la personnalisation de la fenêtre d'informations cartographiques