Maison > Article > interface Web > Comment configurer une carte interactive à l'aide de l'API Google Maps en JavaScript

Comment configurer une carte interactive à l'aide de l'API Google Maps en JavaScript

PHPzoriginal: 2023-04-26 10:30:37781parcourir

Avec le développement du réseau Web, JavaScript, en tant que langage de programmation puissant, est devenu un élément incontournable. En JavaScript, vous pouvez utiliser l'API Google Maps pour créer des cartes interactives. Il s’agit d’une fonctionnalité très utile, notamment dans le cadre du commerce en ligne. Dans cet article, nous expliquerons comment configurer une carte interactive à l'aide de l'API Google Maps en JavaScript.

Première étape : obtenir la clé API Google Maps

Tout d'abord, nous devons obtenir notre propre clé API Google Maps. L'utilisation d'une clé API nous permet d'utiliser l'API Google Maps.

Pour obtenir une clé API, créez d'abord un compte Google Cloud. Après avoir créé le compte, nous devons accéder à la page Google Cloud Console, à partir de laquelle nous pouvons créer une clé API Google Maps.

Étape 2 : Créer une carte

Ensuite, nous devons créer une carte dans un fichier HTML. Cela peut être fait en ajoutant le code suivant dans le fichier HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>设置地图</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        /* 添加样式，设置地图大小 */
        #map {
          height: 400px;
          width: 100%;
         }
    </style>
  </head>
  <body>
    <h3>这是一个简单的地图</h3>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>  
    <script>
        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
            zoom: 8
          });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
  </body>
</html>

Dans le fichier HTML ci-dessus, nous avons utilisé un élément div pour définir la taille de la carte. Ensuite, dans le code JavaScript, nous avons utilisé la clé API ainsi que la latitude et la longitude (YOUR_LATITUDE et YOUR_LONGITUDE) pour définir le point central et le niveau de zoom de la carte. Enfin, nous transmettons la fonction initMap() comme fonction de rappel à l'API afin qu'elle soit automatiquement appelée lorsque l'API aura fini de charger la carte.

Troisième étape : ajouter des marqueurs

L'API Google Maps nous permet également d'ajouter des marqueurs à la carte. Nous pouvons définir des marqueurs sur la carte pour marquer les lieux d'intérêt.

Ensuite, nous devons ajouter le code suivant dans le code JavaScript :

var marker = new google.maps.Marker({
    position: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
    map: map,
    title: '这里是我的标记!'
});

Le code ci-dessus définira un marqueur sur la carte et définira le titre sur "Voici mon marqueur ! ». VOTRE LATITUDE et VOTRE LONGITUDE sont la latitude et la longitude du point de localisation à marquer.

Étape 4 : Ajouter une fenêtre d'informations

La fenêtre d'informations nous permet d'ajouter des informations plus utiles à la marque. Nous pouvons ouvrir une fenêtre d'information en cliquant sur un marqueur, affichant plus d'informations.

Ensuite, nous devons ajouter le code suivant dans le code JavaScript :

var contentString = '<h3>这是我的标记!</h3><p>这里是更多的信息...</p>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

Le code ci-dessus créera une chaîne nommée "contentString" qui contient le contenu à être Le titre et le contenu affiché dans la fenêtre d'informations. Ensuite, créez une fenêtre d'informations nommée "infowindow", qui contient le contenu de la chaîne contentString.

Enfin, nous lions l'événement au marqueur afin que la fenêtre d'information s'ouvre lorsque l'on clique sur le marqueur.

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

Le code ci-dessus ouvrira la fenêtre d'informations lorsque vous cliquerez sur l'afficheur.

En résumé, nous pouvons voir comment utiliser l'API Google Maps en JavaScript pour mettre en place une carte interactive et ajouter des marqueurs et des fenêtres d'informations. Ces fonctionnalités peuvent fournir des capacités de cartographie très utiles pour différents types d'applications en ligne.

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!

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 implémenter FFT à l'aide de JavaScriptArticle suivant：Comment implémenter FFT à l'aide de JavaScript

Articles Liés

Voir plus