Comment implémenter une fonction simple de marquage de carte à l'aide de MySQL et JavaScript

Comment utiliser MySQL et JavaScript pour implémenter une fonction simple de marquage de carte

La fonction de marquage de carte est très courante dans les applications Web modernes. Elle peut être utilisée pour marquer des emplacements spécifiques, afficher des informations de localisation ou afficher des données géographiques, etc. Dans cet article, nous expliquerons comment écrire une fonction simple de marqueur de carte à l'aide d'une base de données MySQL et de JavaScript, et fournirons des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons préparer quelques environnements et outils de base :

1. Base de données MySQL : utilisée pour stocker les informations de localisation marquées sur la carte.
2. Quelques outils technologiques frontaux de base, tels que HTML, CSS et JavaScript.
3. Un environnement serveur de base, tel qu'Apache ou Nginx, est utilisé pour exécuter notre code.

2. Créer une base de données et une table
Tout d'abord, nous devons créer une table dans la base de données MySQL pour stocker les informations de localisation des marqueurs de carte. Nous pouvons créer une table nommée "markers" en utilisant l'instruction SQL suivante :

CREATE TABLE `markers` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `lat` FLOAT(10,6) NOT NULL,
  `lng` FLOAT(10,6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

Cette table contient quatre champs : id, name, lat et lng. Le champ id est une clé primaire auto-incrémentée, le champ name est utilisé pour stocker le nom de la balise et les champs lat et lng sont utilisés pour stocker respectivement la latitude et la longitude de la balise.

3. Écrivez le code front-end
Ensuite, nous pouvons écrire le code HTML et JavaScript front-end pour implémenter la fonction de marquage de carte.

1. Code HTML
   Dans le code HTML, nous avons besoin d'un conteneur de carte pour afficher la carte et d'ajouter un bouton "Ajouter un marqueur" pour ajouter de nouveaux marqueurs. Par exemple :

<div id="map"></div>

<button onclick="addMarker()">添加标记</button>

2. Code JavaScript
   Dans le code JavaScript, nous devons utiliser l'API de la carte pour charger la carte et implémenter la fonction d'ajout de marqueurs. Ici, nous utilisons l'API Google Maps pour démontrer. Tout d'abord, nous devons ajouter une balise <script> au fichier HTML contenant l'API Google Maps. </script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Ensuite, en code JavaScript, on peut écrire le code suivant :

// 初始化地图
function initMap() {
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 2
  });
  
  // 加载标记
  loadMarkers(map);
}

// 加载标记
function loadMarkers(map) {
  // 发送异步请求获取标记数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 解析并显示标记
      var markers = JSON.parse(xhr.responseText);
      for (var i = 0; i < markers.length; i++) {
        var marker = new google.maps.Marker({
          position: {lat: markers[i].lat, lng: markers[i].lng},
          map: map,
          title: markers[i].name
        });
      }
    }
  };
  xhr.open('GET', 'get_markers.php', true);
  xhr.send();
}

// 添加标记
function addMarker() {
  // 获取标记的名称、纬度和经度
  var name = prompt('请输入标记的名称：');
  var lat = parseFloat(prompt('请输入标记的纬度：'));
  var lng = parseFloat(prompt('请输入标记的经度：'));
  
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'));
  
  // 创建标记对象
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map,
    title: name
  });
  
  // 将标记保存到数据库
  saveMarker(name, lat, lng);
}

// 保存标记
function saveMarker(name, lat, lng) {
  // 发送异步请求将标记保存到数据库
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'save_marker.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + name + '&lat=' + lat + '&lng=' + lng);
}

Dans le code ci-dessus, on utilise d'abord la fonction initMap() pour initialiser la carte, et on appelle la fonction loadMarkers() pour charger les marqueurs existants . La fonction loadMarkers() envoie une requête asynchrone au serveur, obtient les données des marqueurs et affiche les marqueurs sur la carte à l'aide de l'API Google Maps.

Dans la fonction addMarker(), nous utilisons la fonction prompt() pour obtenir le nom du marqueur, la latitude et la longitude saisies par l'utilisateur et ajouter le marqueur sur la carte à l'aide de l'API Google Maps. Ensuite, appelez la fonction saveMarker() pour envoyer une requête asynchrone pour enregistrer le marqueur dans la base de données.

4. Écrire du code côté serveur
Enfin, nous devons écrire du code côté serveur pour gérer la demande du client et enregistrer les données de balise dans la base de données.

1. Enregistrer le balisage
   Nous pouvons utiliser PHP pour écrire du code côté serveur afin d'enregistrer le balisage. Créez un fichier nommé "save_marker.php" et écrivez le code suivant :

<?php
// 获取标记的名称、纬度和经度
$name = $_POST['name'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];

// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'your_database_name');

// 插入数据到数据库
$query = "INSERT INTO markers (name, lat, lng) VALUES ('$name', '$lat', '$lng')";
$mysqli->query($query);

// 关闭数据库连接
$mysqli->close();
?>

2. Obtention de marqueurs
   De même, nous pouvons utiliser PHP pour écrire du code côté serveur afin d'obtenir les données des marqueurs. Créez un fichier nommé "get_markers.php" et écrivez le code suivant :

<?php
// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'your_database_name');

// 查询数据库中的标记数据
$query = "SELECT * FROM markers";
$result = $mysqli->query($query);

// 构建标记数组
$markers = array();
while ($row = $result->fetch_assoc()) {
  $markers[] = $row;
}

// 返回标记数据
echo json_encode($markers);

// 关闭数据库连接
$mysqli->close();
?>

Dans le code ci-dessus, nous nous connectons d'abord à la base de données MySQL, puis écrivons respectivement "save_marker.php" et "get_markers.php" pour enregistrer les balises. à la base de données et obtenez les données des balises.

5. Test d'exécution
Après avoir terminé les préparatifs ci-dessus, nous pouvons déployer les fichiers pertinents sur le serveur et accéder aux fichiers HTML dans le navigateur pour voir la page avec fonction de marquage de carte.

Ajoutez avec succès un nouveau marqueur sur la carte en cliquant sur le bouton "Ajouter un marqueur" et en saisissant le nom, la latitude et la longitude. Dans le même temps, les données marquées seront enregistrées dans la base de données MySQL.

Résumé
Dans cet article, nous avons présenté comment écrire une fonction simple de marqueur de carte à l'aide d'une base de données MySQL et de JavaScript, et avons fourni des exemples de code spécifiques. Grâce à cet exemple, nous pouvons apprendre à utiliser MySQL pour stocker des données géographiques, et à utiliser JavaScript et l'API Google Maps pour implémenter des fonctions de marquage cartographique. J'espère que cela sera utile pour développer des applications liées aux 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!