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 đồ
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
API Google Maps cung cấp một phương pháp an toàn để chèn bản đồ vào trang web. Do đó, vị trí chính xác có thể được đánh dấu trên Google Map bằng điểm đánh dấu. Tương tự, điểm đánh dấu với InfoWindow sẽ giúp bạn thêm một số thông tin về vị trí. Vì vậy, bạn có thể nâng cao nhiều điểm đánh dấu bằng InfoWindow to the Map by Google Maps JavaScript API.
BÀI LIÊN QUAN
Giao diện lập trình ứng dụng [API] là gì?
Thích Hệ thống xếp hạng không thích với jQuery, Ajax và PHP
Hệ thống xếp hạng sao với jQuery, Ajax, PHP và MySQL
Google Maps có nhiều điểm đánh dấu rất hữu ích khi bạn cần thêm nhiều vị trí vào một bản đồ. Hầu hết, Google Maps thêm các điểm đánh dấu tĩnh. Tuy nhiên, nếu bạn định thêm các trang web động từ cơ sở dữ liệu, thì có thể thực hiện nhanh chóng với PHP và MySQL. Ngoài ra, bạn có thể đính kèm một số điểm đánh dấu bằng Cửa sổ thông tin vào Google Map một cách sinh động từ cơ sở dữ liệu bằng PHP và MySQL. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm các điểm đánh dấu tùy chỉnh với Cửa sổ thông tin vào Google Maps một cách linh hoạt từ cơ sở dữ liệu bằng PHP và MySQL.
Trong mã ví dụ, chúng tôi sẽ triển khai chức năng sau
- Nhúng Google Maps vào website
- Tìm nạp các vị trí động từ cơ sở dữ liệu
- Thêm nhiều điểm đánh dấu với Cửa sổ thông tin vào Google Map
- Tìm nạp các biểu tượng đánh dấu động từ cơ sở dữ liệu
- Thay đổi và thêm biểu tượng/hình ảnh tùy chỉnh vào điểm đánh dấu
Nhận khóa API
Khóa API là bắt buộc để sử dụng API JavaScript của Google Maps. Do đó, bạn chỉ cần chỉ định khóa API trên lệnh gọi API để xác nhận với Google Maps JavaScript API. Vì vậy, trước khi bạn bắt đầu chèn Google Map vào trang web, hãy tạo khóa API trên Google Developers Console
- Mở Google Developers Console.
- Chọn các tùy chọn dự án từ menu thả xuống Dự án menu at the top. If you don’t have an immediate plan, make a new one.
- Ở phía bên trái trong bảng điều hướng, chọn API & Dịch vụ » Thông tin xác thực.
- Trong trang Thông tin xác thực, hãy chọn Tạo thông tin đăng nhập » Khóa API.
- Tạo khóa API và một hộp thoại sẽ xuất hiện với khóa API mới được tạo
Sao chép khóa API để sử dụng sau này trong tập lệnh trên yêu cầu API JavaScript của Google Maps.
Tạo bảng cơ sở dữ liệu
Cần có một bảng trong cơ sở dữ liệu để lưu trữ thông tin động locations và hình ảnh đánh dấu. SQL sau tạo bảng vị trí với một số trường chính 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;
Cấu hình cơ sở dữ liệu [dbConfig. php]
Bạn phải sử dụng tệp dbConfig.php để liên kết và chọn cơ sở dữ liệu. Chỉ định máy chủ cơ sở dữ liệu [$dbHost], mật khẩu [