Buat aplikasi peta menggunakan PHP dan API Peta Google

Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan API Peta Google untuk mencipta aplikasi peta mudah. Aplikasi ini akan menggunakan API Peta Google untuk memaparkan peta dan PHP untuk memuatkan penanda secara dinamik pada peta.

Sebelum anda bermula, anda perlu mempunyai akaun Google dan mencipta kunci API. Dalam konsol Google Cloud anda, dayakan API JavaScript Peta dan API Geocoding.

1. Konfigurasikan API Peta Google

Selepas mendapat kunci API daripada konsol Google Cloud, benamkannya dalam fail HTML anda:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. Buat peta

Untuk menggunakan peta dalam aplikasi anda, Elemen HTML memerlukan untuk dibuat dan kemudian dihantar ke API Peta Google. Contohnya, untuk mencipta peta dalam elemen dengan id "peta":

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

Kemudian, mulakan peta menggunakan kod JavaScript:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });
}

Ini akan mencipta peta dengan ketinggian 0, kerana kami belum menambah penanda peta lagi.

3. Tambah Penanda Peta

Untuk menambah penanda pada peta, anda perlu menentukan longitud dan latitud bagi setiap penanda dan menghantarnya ke API Peta Google. Contohnya:

// 经度、纬度
const locations = [
  { lat: 37.7749, lng: -122.4194 },
  { lat: 37.7749, lng: -122.4294 },
  { lat: 37.7849, lng: -122.4194 },
  { lat: 37.7849, lng: -122.4294 }
];

// 创建标记并添加到地图上
locations.forEach(location => {
  new google.maps.Marker({
    position: location,
    map: map
  });
});

Ini akan menambah empat penanda pada peta.

4. Pemuatan teg dinamik

Jika anda ingin memuatkan teg secara dinamik daripada pangkalan data atau API berdasarkan syarat tertentu, anda boleh menggunakan PHP. Mula-mula, tulis skrip PHP yang menanyakan data dan mengembalikan tatasusunan JSON yang mengandungi longitud dan latitud setiap penanda:

<?php
// 连接到数据库或API
$data = [
  ['lat' => 37.7749, 'lng' => -122.4194],
  ['lat' => 37.7749, 'lng' => -122.4294],
  ['lat' => 37.7849, 'lng' => -122.4194],
  ['lat' => 37.7849, 'lng' => -122.4294]
];

header('Content-Type: application/json');
echo json_encode($data);
?>

Kemudian, gunakan jQuery dalam JavaScript untuk mendapatkan skrip ini dan hantar datanya ke API Peta Google:

// 获取地图数据
$.get("get_map_data.php", function(data) {
  // 创建标记并添加到地图上
  data.forEach(location => {
    new google.maps.Marker({
      position: location,
      map: map
    });
  });
});

Sekarang markup akan dimuatkan secara dinamik setiap kali halaman dimuatkan.

5. Penedudukan Alamat dan Geokod Terbalik

Selain menambah penanda, API Peta Google menyediakan banyak ciri lain. Menggunakan penyasaran alamat dan geokod terbalik, anda boleh memaparkan lokasi lokasi tertentu pada peta atau mengembalikan nama lokasi tertentu berdasarkan longitud dan latitud.

Sebagai contoh, gunakan geokod terbalik untuk memaparkan alamat titik tengah peta di atas peta:

let map;
let geocoder;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  geocoder = new google.maps.Geocoder();

  // 将地图中心点的地址显示在地图上方
  geocoder.geocode({ location: map.getCenter() }, function(results, status) {
    if (status === "OK") {
      if (results[0]) {
        $("#location").text(results[0].formatted_address);
      } else {
        $("#location").text("No address found");
      }
    } else {
      $("#location").text("Geocoder failed due to: " + status);
    }
  });
}

Ini akan memaparkan alamat titik tengah peta dalam elemen dengan id "lokasi".

6. Ringkasan

Dengan menggunakan PHP dan API Peta Google, kami telah mencipta aplikasi peta mudah yang boleh memuatkan penanda secara dinamik pada peta, memaparkan alamat dan memanfaatkan ciri lain yang disediakan oleh API. Dalam aplikasi praktikal, anda boleh menggunakan teknologi dan API yang lebih maju untuk mencipta aplikasi peta yang lebih berkuasa.

Atas ialah kandungan terperinci Buat aplikasi peta menggunakan PHP dan API Peta Google. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!