So implementieren Sie eine einfache Kartenmarkierungsfunktion mit MySQL und JavaScript

So verwenden Sie MySQL und JavaScript, um eine einfache Kartenmarkierungsfunktion zu implementieren

Die Kartenmarkierungsfunktion ist in modernen Webanwendungen sehr verbreitet. Sie kann zum Markieren bestimmter Orte, zum Anzeigen von Standortinformationen oder zum Anzeigen geografischer Daten usw. verwendet werden. In diesem Artikel behandeln wir das Schreiben einer einfachen Kartenmarkierungsfunktion mithilfe einer MySQL-Datenbank und JavaScript und stellen spezifische Codebeispiele bereit.

1. Vorbereitung
Bevor wir beginnen, müssen wir einige grundlegende Umgebungen und Tools vorbereiten:

1. MySQL-Datenbank: Wird zum Speichern von auf der Karte markierten Standortinformationen verwendet.
2. Einige grundlegende Front-End-Technologietools wie HTML, CSS und JavaScript.
3. Für die Ausführung unseres Codes wird eine einfache Serverumgebung wie Apache oder Nginx verwendet.

2. Datenbank und Tabelle erstellen
Zuerst müssen wir eine Tabelle in der MySQL-Datenbank erstellen, um die Standortinformationen von Kartenmarkierungen zu speichern. Mit der folgenden SQL-Anweisung können wir eine Tabelle mit dem Namen „markers“ erstellen:

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;

Diese Tabelle enthält vier Felder: id, name, lat und lng. Das ID-Feld ist ein automatisch inkrementierter Primärschlüssel, das Namensfeld wird zum Speichern des Namens des Tags verwendet und die Felder lat und lng werden zum Speichern des Breiten- bzw. Längengrads des Tags verwendet.

3. Schreiben Sie den Front-End-Code
Als nächstes können wir den Front-End-HTML- und JavaScript-Code schreiben, um die Kartenmarkierungsfunktion zu implementieren.

1. HTML-Code
   Im HTML-Code benötigen wir einen Kartencontainer, um die Karte anzuzeigen und eine Schaltfläche „Markierung hinzufügen“ zum Hinzufügen neuer Markierungen hinzuzufügen. Zum Beispiel:

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

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

2. JavaScript-Code
   Im JavaScript-Code müssen wir die Karten-API verwenden, um die Karte zu laden und die Funktion zum Hinzufügen von Markierungen zu implementieren. Hier verwenden wir zur Demonstration die Google Maps API. Zuerst müssen wir der HTML-Datei, die die Google Maps-API enthält, ein <script>-Tag hinzufügen. </script>

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

Dann können wir im JavaScript-Code den folgenden Code schreiben:

// 初始化地图
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);
}

Im obigen Code verwenden wir zunächst die Funktion initMap(), um die Karte zu initialisieren, und rufen die Funktion loadMarkers() auf, um die vorhandenen Markierungen zu laden . Die Funktion „loadMarkers()“ sendet eine asynchrone Anfrage an den Server, ruft Markierungsdaten ab und zeigt die Markierungen mithilfe der Google Maps-API auf der Karte an.

In der Funktion addMarker() verwenden wir die Funktion prompt(), um den vom Benutzer eingegebenen Markierungsnamen sowie den Breiten- und Längengrad abzurufen und die Markierung mithilfe der Google Maps-API auf der Karte hinzuzufügen. Rufen Sie dann die Funktion saveMarker() auf, um eine asynchrone Anfrage zum Speichern der Markierung in der Datenbank zu senden.

4. Schreiben Sie serverseitigen Code
Schließlich müssen wir serverseitigen Code schreiben, um die Anfrage des Clients zu bearbeiten und die Tag-Daten in der Datenbank zu speichern.

1. Markup speichern
   Wir können PHP verwenden, um serverseitigen Code zu schreiben, um Markup zu speichern. Erstellen Sie eine Datei mit dem Namen „save_marker.php“ und schreiben Sie den folgenden Code:

<?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. Markierungen abrufen
   Ähnlich können wir PHP verwenden, um serverseitigen Code zu schreiben, um Markierungsdaten abzurufen. Erstellen Sie eine Datei mit dem Namen „get_markers.php“ und schreiben Sie den folgenden Code:

<?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();
?>

Im obigen Code stellen wir zunächst eine Verbindung zur MySQL-Datenbank her und schreiben dann „save_marker.php“ bzw. „get_markers.php“, um Tags zu speichern in die Datenbank übertragen und Tag-Daten abrufen.

5. Testlauf
Nach Abschluss der oben genannten Vorbereitungen können wir die relevanten Dateien auf dem Server bereitstellen und auf die HTML-Dateien im Browser zugreifen, um die Seite mit der Kartenmarkierungsfunktion anzuzeigen.

Fügen Sie erfolgreich eine neue Markierung auf der Karte hinzu, indem Sie auf die Schaltfläche „Markierung hinzufügen“ klicken und den Namen sowie den Breiten- und Längengrad eingeben. Gleichzeitig werden die markierten Daten in der MySQL-Datenbank gespeichert.

Zusammenfassung
In diesem Artikel haben wir vorgestellt, wie man eine einfache Kartenmarkierungsfunktion mithilfe einer MySQL-Datenbank und JavaScript schreibt, und spezifische Codebeispiele bereitgestellt. Anhand dieses Beispiels können wir lernen, wie man MySQL zum Speichern geografischer Daten verwendet und wie man JavaScript und die Google Maps API verwendet, um Kartenmarkierungsfunktionen zu implementieren. Ich hoffe, dass es für die Entwicklung kartenbezogener Anwendungen hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Kartenmarkierungsfunktion mit MySQL und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!