Thêm điểm đánh dấu vào Google Maps từ cơ sở dữ liệu bằng PHP

Google Map Javascript API cung cấp dữ liệu địa lý dựa trên yêu cầu được gửi qua tập lệnh phía máy khách. Trong hướng dẫn trước, chúng ta đã biết cách lấy tài nguyên Google Map và vẽ vị trí hiện tại của người dùng

Trong hướng dẫn này, chúng ta sẽ xem cách thêm điểm đánh dấu để hiển thị một mảng vị trí trên Google Map

Trong ví dụ này, tôi đã đọc các vị trí từ cơ sở dữ liệu quốc gia chứa số lượng tên quốc gia. Tôi lặp lại các kết quả quốc gia và lấy vĩ độ và kinh độ bằng cách sử dụng Google Map GeoCoding Service

Sử dụng tọa độ vị trí, tôi đã thêm các điểm đánh dấu để xác định vị trí các quốc gia trên Bản đồ. Khi di chuột qua điểm đánh dấu trên bản đồ, tôi đã hiển thị chú giải công cụ có tên quốc gia bằng cách đặt tham số tiêu đề

Đọc tên quốc gia từ cơ sở dữ liệu

Mã PHP này kết nối cơ sở dữ liệu bằng lớp DBController và đọc tên quốc gia thành một mảng. Mảng kết quả này được sử dụng để lấy tọa độ vị trí mà chúng ta có thể thêm các điểm đánh dấu bản đồ

runQuery($query);

?>

Javascript để thêm điểm đánh dấu vị trí trên Google Map

Mã Javascript sau đây được sử dụng để lấy tọa độ vị trí cho tên quốc gia được lấy từ cơ sở dữ liệu. Tôi đã lặp lại kết quả cơ sở dữ liệu và lấy tọa độ kinh độ và vĩ độ của quốc gia trên mỗi lần lặp lại vòng lặp bằng dịch vụ Google Map GeoCoding

Sau đó, những dữ liệu vị trí này sẽ được sử dụng để vẽ vị trí quốc gia trên bản đồ bằng một điểm đánh dấu. Sự kiện di chuột qua điểm đánh dấu sẽ hiển thị tên quốc gia cùng với chú giải công cụ

Để lưu trữ thông tin vị trí động và hình ảnh đánh dấu, cần có một bảng trong cơ sở dữ liệu. SQL sau đây tạo một bảng vị trí với một số trường cơ bản trong cơ sở dữ liệu MySQL

CREATE TABLE `locations` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `latitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `longitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `info` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `icon` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT 'Marker icon',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

Cấu hình cơ sở dữ liệu (dbConfig. php)

dbConfig. file php dùng để kết nối và chọn cơ sở dữ liệu. Chỉ định máy chủ cơ sở dữ liệu ($dbHost), tên người dùng ($dbUsername), mật khẩu ($dbPassword) và tên ($dbName) theo thông tin đăng nhập cơ sở dữ liệu MySQL của bạn

  Login with Instagram



	Login with Instagram


      

Tìm nạp vị trí và thông tin hình ảnh đánh dấu từ cơ sở dữ liệu

Vĩ độ và kinh độ được lấy từ cơ sở dữ liệu bằng PHP và MySQL

• Tập kết quả đầu tiên được sử dụng để tạo nhiều điểm đánh dấu và thông tin biểu tượng tùy chỉnh (vị trí, vĩ độ, kinh độ và nguồn hình ảnh biểu tượng)
• Tập kết quả thứ hai được sử dụng để tạo nội dung của cửa sổ thông tin

query("SELECT * FROM locations"); 
 
/* Fetch the info-window data from the database */
$result2 = $db->query("SELECT * FROM locations"); 
?>

Tải hàm initMap() để khởi tạo Google Map

Thêm nhiều điểm đánh dấu bằng hình ảnh tùy chỉnh

Tải API JavaScript của Google Map và chỉ định khóa API trong tham số khóa

Nhúng Google Map với các biểu tượng đánh dấu tùy chỉnh

Xác định một phần tử HTML để nhúng Google Map với nhiều điểm đánh dấu và Cửa sổ thông tin trên trang web. Chỉ định ID thành phần (mapCanvas) trong đối tượng Google Map

CREATE TABLE `locations` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `latitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `longitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `info` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `icon` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT 'Marker icon',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

Tìm nạp vị trí và thông tin hình ảnh đánh dấu từ cơ sở dữ liệu

Bằng cách sử dụng PHP và MySQL, kinh độ và vĩ độ được lấy từ cơ sở dữ liệu

• Để tạo nhiều điểm đánh dấu và thông tin biểu tượng tùy chỉnh, bạn phải sử dụng tập kết quả đầu tiên.  
• (vị trí, vĩ độ, kinh độ và nguồn hình ảnh biểu tượng)
• Sử dụng tập hợp kết quả thứ hai, để tạo nội dung của cửa sổ thông tin,

query("SELECT * FROM locations"); 
 
// Fetch the info-window data from the database 
$result2 = $db->query("SELECT * FROM locations"); 
?>

XEM THÊM. Trường địa chỉ tự động hoàn thành bằng cách sử dụng API JavaScript của Google Maps với Thư viện địa điểm

Thêm nhiều điểm đánh dấu bằng hình ảnh tùy chỉnh

Tải API JavaScript của Google Map và chỉ định khóa API trong tham số quan trọng

Mã JavaScript sau đây thêm rất nhiều điểm đánh dấu với các biểu tượng tùy chỉnh vào Google Maps từ cơ sở dữ liệu trong PHP

•  initMap() là một hàm JavaScript tùy chỉnh khởi tạo Google Maps.
• Xác định đối tượng Google Maps và đính kèm Bản đồ vào phần tử HTML
• Tìm nạp URL hình ảnh biểu tượng vĩ độ, kinh độ và điểm đánh dấu từ cơ sở dữ liệu và tạo mảng vị trí cho nhiều điểm đánh dấu (điểm đánh dấu)
• Lấy thông tin vị trí từ cơ sở dữ liệu và tạo một mảng cho nội dung của cửa sổ thông tin (

  connect_error) { 
      die("Connection failed: " . $db->connect_error); 
  }

  3)
• Thêm nhiều điểm đánh dấu với vị trí động và biểu tượng tùy chỉnh vào Google Maps
• Thêm cửa sổ thông tin có nội dung động vào điểm đánh dấu
• Đặt mức thu phóng của Google Map

Tải hàm 

connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

Nhúng Google Map với các biểu tượng đánh dấu tùy chỉnh

Xác định một phần tử HTML để nhúng Google Map với nhiều điểm đánh dấu và Cửa sổ thông tin trên trang web. Chỉ định ID thành phần (mapCanvas) trong đối tượng Google Map

Mã CSS

Sử dụng CSS để đặt chiều cao và trọng lượng của vùng chứa bản đồ Google

#mapCanvas {
    width: 100%;
    height: 650px;
}

XEM THÊM. Xác thực thẻ tín dụng bằng jQuery

Phần kết luận

Đầu tiên, biểu tượng điểm đánh dấu Google Map có thể được thay đổi bằng JavaScript. Thứ hai, sử dụng tập lệnh mẫu của chúng tôi để sửa đổi và thêm hình ảnh tùy chỉnh vào biểu tượng điểm đánh dấu trong Google Maps. Thứ ba, bạn có thể tự động thêm các dấu và ký hiệu từ cơ sở dữ liệu bằng PHP và MySQL. Và cuối cùng, không chỉ điểm đánh dấu mà bạn còn có thể thêm nội dung động vào cửa sổ thông tin của Google Map

Ngoài ra, hãy đọc blog trước của chúng tôi- Trường địa chỉ tự động điền bằng API JavaScript của Google Maps với Thư viện địa điểm

Làm cách nào để lưu các điểm đánh dấu vị trí trên Google Maps bằng PHP?

Làm cách nào để hiển thị nhiều vị trí trên Google Maps bằng PHP?

Tôi có thể đặt điểm đánh dấu trên Google Maps không?