Siaran ini akan memandu anda membuat aplikasi ride-a-request menggunakan API Peta TomTom. Aplikasi ini akan membolehkan pengguna memasukkan berbilang lokasi pengambilan dan penghantaran, mengira laluan optimum dan memaparkannya pada peta. Kami akan merangkumi segala-galanya daripada mendapatkan kunci API hingga memaparkan laluan yang dioptimumkan pada peta.
Langkah 1: Menyediakan TomTom API
Sebelum menyelami kod tersebut, anda perlu mendaftar di Portal Pembangun TomTom dan mendapatkan kunci API. Kunci ini membolehkan anda mengakses perkhidmatan TomTom seperti penghalaan, pengekodan geo dan peta.
Langkah 2: Melaksanakan Fungsi Permintaan Perjalanan
Teras aplikasi melibatkan pengumpulan alamat, menukarnya kepada koordinat, dan mengira laluan optimum. Begini cara anda boleh melakukannya:
def ride_request(request): if request.method == 'POST': form = RideForm(request.POST) if form.is_valid(): ride = form.save(commit=False) # Get coordinates for the pickup and drop locations pickup_coords = get_coordinates(ride.pickup_address) pickup_coords_1 = get_coordinates(ride.pickup_address_1) pickup_coords_2 = get_coordinates(ride.pickup_address_2) drop_coords = get_coordinates(ride.drop_address) # Ensure all coordinates are available if all([pickup_coords, pickup_coords_1, pickup_coords_2, drop_coords]): # Set the coordinates ride.pickup_latitude, ride.pickup_longitude = pickup_coords ride.pickup_latitude_1, ride.pickup_longitude_1 = pickup_coords_1 ride.pickup_latitude_2, ride.pickup_longitude_2 = pickup_coords_2 ride.drop_latitude, ride.drop_longitude = drop_coords # Save the ride and redirect to the success page try: ride.save() return redirect('success_page', pickup_lon=ride.pickup_longitude, pickup_lat=ride.pickup_latitude, pickup_lon_1=ride.pickup_longitude_1, pickup_lat_1=ride.pickup_latitude_1, pickup_lon_2=ride.pickup_longitude_2, pickup_lat_2=ride.pickup_lat_2, drop_lon=ride.drop_longitude, drop_lat=ride.drop_latitude) except IntegrityError as e: messages.error(request, f'IntegrityError: {str(e)}') else: messages.error(request, 'Error getting coordinates. Please try again.') else: form = RideForm() return render(request, 'maps/ride_request.html', {'form': form})
Dalam coretan ini, aplikasi menerima input pengguna untuk berbilang alamat, menukar alamat ini kepada koordinat menggunakan fungsi get_coordinates dan menyimpan data untuk kegunaan kemudian.
def get_coordinates(address): """ Get coordinates (latitude, longitude) for a given address using TomTom Geocoding API. """ api_key = 'YOUR_TOMTOM_API_KEY' base_url = 'https://api.tomtom.com/search/2/geocode/{address}.json' # Prepare the URL with the address and API key url = base_url.format(address=address) params = {'key': api_key} # Make the request to TomTom Geocoding API response = requests.get(url, params=params) data = response.json() # Check if the request was successful if response.status_code == 200 and data.get('results'): # Extract coordinates from the response result = data['results'][0] if 'position' in result: coordinates = result['position'] return coordinates.get('lat'), coordinates.get('lon') else: print( f"Error getting coordinates for {address}: 'position' key not found in the response.") return None else: # Handle errors or return a default value print( f"Error getting coordinates for {address}: {data.get('message')}") return None
Langkah 3: Mengira Laluan Dioptimumkan
Sebaik sahaja anda mempunyai koordinat, langkah seterusnya ialah mengira laluan yang dioptimumkan. API Pengoptimuman Waypoint TomTom membantu dalam menentukan laluan paling cekap antara berbilang titik.
def get_optimized_route(*pickup_coords, drop_coords): api_key = 'YOUR_TOMTOM_API_KEY' # Prepare the payload for the API payload = { 'waypoints': [{'point': {'latitude': lat, 'longitude': lon}} for lon, lat in pickup_coords], 'options': {'travelMode': 'car'}, } # Add the drop location to the waypoints payload['waypoints'].append({'point': {'latitude': drop_coords[1], 'longitude': drop_coords[0]}}) # API request response = requests.post(f'https://api.tomtom.com/routing/waypointoptimization/1', params={'key': api_key}, json=payload) if response.status_code == 200: data = response.json() if 'optimizedOrder' in data: # Extract the optimized route return [get_route_geometry(pickup_coords[i], pickup_coords[j]) for i, j in zip(data['optimizedOrder'], data['optimizedOrder'][1:])] return None
Fungsi ini menghantar permintaan kepada API TomTom, menerima susunan titik laluan yang dioptimumkan dan kemudian mengira geometri laluan.
Langkah 4: Memaparkan Peta dan Laluan
Akhir sekali, selepas memperoleh data laluan yang dioptimumkan, tiba masanya untuk memaparkan peta pada success_page.html anda.
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ride Request - Success</title> <link rel="stylesheet" href="{% static 'maps/css/styles.css' %}"> <!-- Include TomTom Map SDK --> <link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/maps/maps.css" /> <script type="text/javascript" src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/maps/maps-web.min.js"></script> </head> <body> <div class="container"> <div class="map-container" id="dynamic-map"></div> </div> <!-- Map Initialization Script --> <script type="text/javascript"> var map; var pickup_lon = {{ pickup_lon }}; var pickup_lat = {{ pickup_lat }}; var pickup_lon_1 = {{ pickup_lon_1 }}; var pickup_lat_1 = {{ pickup_lat_1 }}; var pickup_lon_2 = {{ pickup_lon_2 }}; var pickup_lat_2 = {{ pickup_lat_2 }}; var drop_lon = {{ drop_lon }}; var drop_lat = {{ drop_lat }}; var routeGeometry = {{ route_data.route_geometry| safe }}; var geomatryCoordinates = routeGeometry.geometry.coordinates; const API_KEY = 'YOUR_TOMTOM_API_KEY'; function initMap() { //let center = [(pickup_lat + drop_lat) / 2, (pickup_lon + drop_lon) / 2]; let center = [pickup_lon, pickup_lat]; console.log('center:', center) map = tt.map({ key: API_KEY, container: 'dynamic-map', //stylesVisibility: { // trafficIncidents: true //}, center: center, bearing: 0, maxZoom: 21, minZoom: 1, pitch: 60, zoom: 12, //style: `https://api.tomtom.com/style/1/style/*?map=2/basic_street-satellite&poi=2/poi_dynamic-satellite&key=${API_KEY}` }); map.addControl(new tt.FullscreenControl()); map.addControl(new tt.NavigationControl()); map.on('load', () => { console.log('Map loaded successfully!'); // Add markers for all pickup locations and drop location var pickupMarker = new tt.Marker({ color: 'green' }).setLngLat([pickup_lon, pickup_lat]).addTo(map); var pickupMarker1 = new tt.Marker({ color: 'blue' }).setLngLat([pickup_lon_1, pickup_lat_1]).addTo(map); var pickupMarker2 = new tt.Marker({ color: 'orange' }).setLngLat([pickup_lon_2, pickup_lat_2]).addTo(map); var dropMarker = new tt.Marker({ color: 'red' }).setLngLat([drop_lon, drop_lat]).addTo(map); try { // Iterate through each set of coordinates and add route layer geomatryCoordinates.forEach((coordinates, index) => { var routeGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: coordinates, }, }; // Check if the routeGeometry is a valid GeoJSON object if (isValidGeoJSON(routeGeometry)) { map.addLayer({ 'id': `route-${index}`, 'type': 'line', 'source': { 'type': 'geojson', 'data': routeGeometry, }, 'layout': { 'line-join': 'round', 'line-cap': 'round', }, 'paint': { 'line-color': '#3887be', 'line-width': 8, 'line-opacity': 0.8, }, }); console.log(`Route layer ${index} added successfully!`); } else { console.error(`Invalid GeoJSON format for route ${index}. Creating a simple LineString.`); // Attempt to create a LineString GeoJSON var simpleRouteGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: coordinates, }, }; map.addLayer({ 'id': `route-${index}`, 'type': 'line', 'source': { 'type': 'geojson', 'data': simpleRouteGeometry, }, 'layout': { 'line-join': 'round', 'line-cap': 'round', }, 'paint': { 'line-color': '#3887be', 'line-width': 8, 'line-opacity': 0.8, }, }); console.log(`Route layer ${index} added successfully with new GeoJSON.`); } }); } catch (error) { console.error('Error handling GeoJSON:', error); } function isValidGeoJSON(data) { return typeof data === 'object' && data !== null && data.type === 'Feature'; } initMap(); // Call the initMap function </script> </body> </html>
Kod HTML ini memulakan peta TomTom, meletakkan penanda pada titik pengambilan dan penghantaran serta melukis laluan di antara mereka.
Keputusan: Borang Permintaan Perjalanan & Peta Kejayaan
Nota: Kod yang disediakan di atas ialah contoh ringkas untuk menunjukkan fungsi asas meminta perjalanan dan mengira laluan menggunakan API TomTom. Pelaksanaan sebenar mungkin berbeza dan termasuk ciri atau variasi tambahan berdasarkan keperluan khusus. Untuk mendapatkan maklumat yang lebih terperinci dan penggunaan lanjutan, sila rujuk kepada Dokumentasi Pembangun TomTom rasmi.
Atas ialah kandungan terperinci Cara Membuat Aplikasi Pengoptimuman Laluan Berbilang Henti dengan API Peta TomTom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!