Bagaimana untuk melaksanakan fungsi penanda peta mudah menggunakan MySQL dan JavaScript

Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi penandaan peta mudah

Fungsi penandaan peta sangat biasa dalam aplikasi web moden, ia boleh Digunakan untuk menandakan lokasi tertentu, memaparkan maklumat lokasi atau memaparkan data geografi, dsb. Dalam artikel ini, kami akan membincangkan cara menulis fungsi penanda peta mudah menggunakan pangkalan data MySQL dan JavaScript, dan menyediakan contoh kod khusus.

1. Persediaan
Sebelum kita mula, kita perlu menyediakan beberapa persekitaran dan alatan asas:

1. Pangkalan data MySQL: digunakan untuk menyimpan peta Lokasi penanda maklumat.
2. Beberapa alatan teknologi asas hadapan, seperti HTML, CSS dan JavaScript.
3. Persekitaran pelayan asas, seperti Apache atau Nginx, digunakan untuk menjalankan kod kami.

2 Cipta pangkalan data dan jadual
Pertama, kita perlu mencipta jadual dalam pangkalan data MySQL untuk menyimpan maklumat lokasi penanda peta. Kita boleh menggunakan pernyataan SQL berikut untuk mencipta jadual bernama "penanda":

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;

Jadual ini mengandungi empat medan: id, nama, lat dan lng. Medan id ialah kunci utama yang ditambah secara automatik, medan nama digunakan untuk menyimpan nama teg, dan medan lat dan lng digunakan untuk menyimpan latitud dan longitud teg masing-masing.

3 Tulis kod bahagian hadapan
Seterusnya, kita boleh menulis kod HTML dan JavaScript bahagian hadapan untuk melaksanakan fungsi penandaan peta.

1. Kod HTML
   Dalam kod HTML, kita memerlukan bekas peta untuk memaparkan peta dan menambah butang "Tambah Penanda" untuk menambah penanda baharu. Contohnya:

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

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

2. Kod JavaScript
   Dalam kod JavaScript, kita perlu menggunakan API peta untuk memuatkan peta dan melaksanakan fungsi menambah penanda. Di sini kami menggunakan API Peta Google untuk menunjukkan. Pertama, kita perlu menambah teg pada fail HTML yang mengandungi API Peta Google.

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

Kemudian, dalam kod JavaScript, kita boleh menulis kod berikut:

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

Dalam kod di atas, kita mula-mula menggunakan fungsi initMap() untuk memulakan peta, dan panggil fungsi loadMarkers() untuk memuatkan penanda sedia ada. Fungsi loadMarkers() menghantar permintaan tak segerak ke pelayan, mendapatkan data penanda dan memaparkan penanda pada peta menggunakan API Peta Google.

Dalam fungsi addMarker(), kami menggunakan fungsi prompt() untuk mendapatkan nama penanda, latitud dan longitud yang dimasukkan oleh pengguna dan menggunakan API Peta Google untuk menambah penanda pada peta. Kemudian, panggil fungsi saveMarker() untuk menghantar permintaan tak segerak untuk menyimpan penanda ke pangkalan data.

4. Tulis kod sebelah pelayan
Akhir sekali, kita perlu menulis kod sebelah pelayan untuk mengendalikan permintaan pelanggan dan menyimpan data tag ke pangkalan data.

1. Menyimpan Tag
   Kami boleh menggunakan PHP untuk menulis kod sebelah pelayan untuk menyimpan tag. Buat fail bernama "save_marker.php" dan tulis kod berikut:

<?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. Get Marker
   Begitu juga, kita boleh menggunakan PHP untuk menulis kod pelayan pada akhir untuk mendapatkan data tag. Buat fail bernama "get_markers.php" dan tulis kod berikut:

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

Dalam kod di atas, kami mula-mula menyambung ke pangkalan data MySQL, dan kemudian tulis "save_marker" masing-masing .php " dan "get_markers.php" untuk menyimpan penanda ke pangkalan data dan mendapatkan data penanda.

5 Ujian dijalankan
Selepas melengkapkan persediaan di atas, kami boleh menggunakan fail yang berkaitan ke pelayan dan mengakses fail HTML dalam pelayar untuk melihat halaman Fungsi penanda peta.

Anda boleh berjaya menambah penanda baharu pada peta dengan mengklik butang "Tambah Penanda" dan memasukkan nama, latitud dan longitud. Pada masa yang sama, data yang ditanda akan disimpan ke pangkalan data MySQL.

Ringkasan
Dalam artikel ini, kami memperkenalkan cara menulis fungsi penandaan peta mudah menggunakan pangkalan data MySQL dan JavaScript, dan memberikan contoh kod khusus. Melalui contoh ini, kita boleh belajar cara menggunakan MySQL untuk menyimpan data geografi, dan cara menggunakan JavaScript dan API Peta Google untuk melaksanakan fungsi penandaan peta. Saya harap ia akan membantu untuk membangunkan aplikasi berkaitan peta.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penanda peta mudah menggunakan MySQL dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!