Giao diện
Cấu hình
Bảng mapConfiguration
Plugin lưu cấu hình map provider trong database:
| Cột | Kiểu | Mô tả |
|---|---|---|
type | string | Loại map provider (google) |
accessKey | string | API key của map provider |
securityJsCode | string | Mã bảo mật JavaScript (nếu cần) |
Admin quản lý qua trang Settings → Map Configuration hoặc qua API trực tiếp.
API endpoints
| Endpoint | Method | Mô tả |
|---|---|---|
map-configuration:get | GET | Lấy cấu hình (API key, type) |
map-configuration:set | POST | Cập nhật cấu hình |
Client gọi map-configuration:get để lấy API key trước khi tải Google Maps JavaScript API.
Bốn geo field types chi tiết
Point
- Lưu trữ:
[longitude, latitude]— mảng 2 phần tử. - Input widget: Bản đồ với marker có thể kéo — user click để đặt vị trí.
- Display widget: Marker trên bản đồ nhỏ hoặc text tọa độ.
- Value parser: Chuyển đổi giữa
[lng, lat](client) và format lưu trữ database.
Polygon
- Lưu trữ:
[[lng1, lat1], [lng2, lat2], ...]— mảng tọa độ tạo vùng khép kín. - Input widget: Bản đồ với drawing tool — user vẽ polygon bằng click từng điểm.
- Display widget: Vùng tô màu trên bản đồ.
LineString
- Lưu trữ:
[[lng1, lat1], [lng2, lat2], ...]— mảng tọa độ tạo đường. - Input widget: Bản đồ với drawing tool — user click tạo đường nối.
- Display widget: Đường nối trên bản đồ.
Circle
- Lưu trữ:
{ center: [lng, lat], radius: number }— tâm và bán kính (mét). - Input widget: Bản đồ — user click đặt tâm, kéo để chọn bán kính.
- Display widget: Hình tròn trên bản đồ.
Field widgets
Mỗi geo field type có hai widget:
| Widget | Mô tả |
|---|---|
| Input | Map picker cho form — user tương tác bản đồ để nhập giá trị |
| Display | Hiển thị giá trị trên bản đồ nhỏ hoặc text trong table/detail |
Widget tự động load Google Maps API bằng @googlemaps/js-api-loader với API key từ configuration.
Value parsers
Server-side value parsers chuyển đổi dữ liệu geo:
- Input: Nhận dữ liệu từ client format → chuyển sang storage format.
- Output: Đọc từ database → chuyển sang client format.
Mỗi geo type có parser riêng đăng ký trong server plugin.
Provider config
Hiện tại plugin hỗ trợ Google Maps làm map provider. Cấu hình tối thiểu cần:
- API key: Key từ Google Cloud Console với quyền Maps JavaScript API.
- Tương lai có thể mở rộng hỗ trợ thêm provider khác (Mapbox, AMap...).