Để tạo một mã đặt xe taxi tích hợp Google Maps, tính phí theo quãng đường và hỗ trợ các loại xe khác nhau (5 chỗ, 7 chỗ, 16 chỗ, 35 chỗ, 45 chỗ) trên nền tảng WordPress, bạn có thể làm theo các bước sau:
1. **Chuẩn bị công cụ và tài nguyên**
– **WordPress**: Đảm bảo bạn đã cài đặt WordPress.
– **Google Maps API**: Bạn cần đăng ký và lấy API key từ Google Cloud Platform.
– **Plugin hỗ trợ**: Sử dụng các plugin như **WP Google Maps** hoặc **Toolset** để tích hợp bản đồ và tính năng đặt xe.
2. **Tích hợp Google Maps**
– **Đăng ký Google Maps API**:
1. Truy cập [Google Cloud Platform](https://console.cloud.google.com/).
2. Tạo một dự án mới.
3. Kích hoạt **Maps JavaScript API**, **Directions API**, và **Distance Matrix API**.
4. Tạo API key và hạn chế quyền truy cập để bảo mật.
– **Cài đặt plugin WP Google Maps**:
1. Cài đặt và kích hoạt plugin **WP Google Maps** từ kho plugin WordPress.
2. Nhập API key vào cài đặt của plugin.
3. **Tạo form đặt xe**
– Sử dụng plugin **Gravity Forms** hoặc **Contact Form 7** để tạo form đặt xe. Form cần có các trường:
– Điểm đi
– Điểm đến
– Loại xe (5 chỗ, 7 chỗ, 16 chỗ, 35 chỗ, 45 chỗ)
– Ngày giờ đặt xe
– Thông tin liên hệ
4. **Tính phí theo quãng đường**
– Sử dụng **Google Distance Matrix API** để tính khoảng cách và thời gian di chuyển.
– Tạo một hàm tính toán phí dựa trên loại xe và khoảng cách. Ví dụ:
“`php
function calculate_fare($distance, $vehicle_type) {
$rates = [
‘5_seats’ => 10000, // 10,000 VND/km
‘7_seats’ => 12000,
’16_seats’ => 15000,
’35_seats’ => 20000,
’45_seats’ => 25000,
];
return $distance * $rates[$vehicle_type];
}
“`
5. **Hiển thị bản đồ và tính phí**
– Sử dụng JavaScript để gọi **Google Maps API** và hiển thị bản đồ.
– Khi người dùng nhập điểm đi và điểm đến, sử dụng **Directions API** để hiển thị tuyến đường và **Distance Matrix API** để tính khoảng cách.
– Hiển thị phí dựa trên loại xe và khoảng cách.
6. **Xử lý đặt xe**
– Khi người dùng submit form, lưu thông tin vào database và gửi email xác nhận.
– Sử dụng plugin như **FluentCRM** hoặc **Mailchimp** để quản lý thông tin khách hàng.
7. **Tối ưu hóa và bảo mật**
– Đảm bảo API key được bảo mật.
– Sử dụng SSL để mã hóa dữ liệu.
– Tối ưu hóa tốc độ tải trang bằng cách sử dụng caching plugin như **WP Rocket**.
8. **Kiểm tra và triển khai**
– Kiểm tra toàn bộ hệ thống để đảm bảo tính năng hoạt động chính xác.
– Triển khai website và tiếp tục theo dõi, cập nhật khi cần.
Ví dụ code tích hợp Google Maps và tính phí:
“`html
<div id=”map” style=”height: 400px; width: 100%;”></div>
<form id=”booking-form”>
<input type=”text” id=”origin” placeholder=”Điểm đi”>
<input type=”text” id=”destination” placeholder=”Điểm đến”>
<select id=”vehicle-type”>
<option value=”5_seats”>Xe 5 chỗ</option>
<option value=”7_seats”>Xe 7 chỗ</option>
<option value=”16_seats”>Xe 16 chỗ</option>
<option value=”35_seats”>Xe 35 chỗ</option>
<option value=”45_seats”>Xe 45 chỗ</option>
</select>
<button type=”button” onclick=”calculateFare()”>Tính phí</button>
</form>
<div id=”fare-result”></div>
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById(‘map’), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
}
function calculateFare() {
const origin = document.getElementById(‘origin’).value;
const destination = document.getElementById(‘destination’).value;
const vehicleType = document.getElementById(‘vehicle-type’).value;
const service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: ‘DRIVING’,
}, (response, status) => {
if (status === ‘OK’) {
const distance = response.rows[0].elements[0].distance.value / 1000; // km
const fare = calculate_fare(distance, vehicleType);
document.getElementById(‘fare-result’).innerText = `Phí: ${fare.toLocaleString()} VND`;
} else {
alert(‘Không thể tính phí. Vui lòng thử lại.’);
}
});
}
function calculate_fare(distance, vehicle_type) {
const rates = {
‘5_seats’: 10000,
‘7_seats’: 12000,
’16_seats’: 15000,
’35_seats’: 20000,
’45_seats’: 25000,
};
return distance * rates[vehicle_type];
}
</script>
<script async defer src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”></script>
“`
Kết luận
Với các bước trên, bạn có thể tạo một hệ thống đặt xe taxi tích hợp Google Maps và tính phí theo quãng đường trên nền tảng WordPress. Đảm bảo kiểm tra kỹ lưỡng và tối ưu hóa để mang lại trải nghiệm tốt nhất cho người dùng.
