5分鐘學會物流軌跡地圖API嵌入到頁面中，實現物流軌跡視覺化

安靜的小員發表於2024-03-01
地圖API視覺化

前言

在電子商務和線上購物日益普及的今天，為使用者提供實時的物流資訊已成為提升客戶滿意度的關鍵。本文將指導您如何在網頁中嵌入物流軌跡地圖API，以便使用者能夠直觀地跟蹤他們的包裹。

1.申請介面、 獲取 API 金鑰

首先，我們需要申請一個物流軌跡地圖API，這裡我使用的是 APISpace 的 快遞物流訂閱與推送（含物流軌跡），裡面有物流軌跡獲取API。登入註冊進去就可以獲取到API金鑰，也就是 X-Apispace-Token。

2.前端頁面UI程式碼

有了介面，我們需要建立一個簡單的前端介面，讓使用者輸入必要的資訊併發起查詢。以下是一個基本的HTML和CSS程式碼示例，用於構建使用者輸入介面：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>物流軌跡查詢</title> <style>   body {     font-family: Arial, sans-serif;     padding: 20px;   }   #query-form {     max-width: 300px;     margin: auto;   }   input[type="text"], button {     width: 100%;     padding: 10px;     margin-bottom: 10px;   } </style> </head> <body>   <form id="query-form">     <label for="cpCode">快遞編碼:</label>     <input type="text" id="cpCode" name="cpCode" required>     <label for="mailNo">快遞單號:</label>     <input type="text" id="mailNo" name="mailNo" required>     <label for="phone">手機號:</label>     <input type="tel" id="phone" name="phone" required>     <label for="origin">出發地:</label>     <input type="text" id="origin" name="origin" required>     <label for="destination">目的地:</label>     <input type="text" id="destination" name="destination" required>     <label for="receiveAddress">收件詳細地址:</label>     <input type="text" id="receiveAddress" name="receiveAddress" required>     <button type="button" >

3.JavaScript 程式碼，發起請求


接下來，我們將編寫JavaScript程式碼來處理使用者輸入，發起API請求，並在頁面上顯示物流軌跡地圖。


// JavaScript程式碼 function queryTrace() {   // 獲取使用者輸入的資料   const cpCode = document.getElementById('cpCode').value;   const mailNo = document.getElementById('mailNo').value;   const phone = document.getElementById('phone').value;   const origin = document.getElementById('origin').value;   const destination = document.getElementById('destination').value;   const receiveAddress = document.getElementById('receiveAddress').value;   // 初始化API金鑰和請求資料   const apiKey = '您的API金鑰'; // 替換為您的API金鑰，登入APISpace即可獲得   const requestData = {     cpCode: cpCode,     mailNo: mailNo,     phone: phone,     origin: origin,     destination: destination,     receiveAddress: receiveAddress   };   // 使用fetch API發起請求   fetch('{     method: 'POST',     headers: {       'X-Apispace-Token': apiKey,       'Content-Type': 'application/json'     },     body: JSON.stringify(requestData)   })   .then(response => {     if (!response.ok) {       throw new Error('Network response was not ok');     }     return response.json();   })   .then(data => {     if (data.success) {       // 建立一個iframe元素來顯示軌跡地圖       const iframe = document.createElement('iframe');       iframe.src = data.traceMapR; // 設定iframe的src屬性為軌跡地圖的URL       iframe.width = '100%'; // 設定iframe的寬度       iframe.height = '400px'; // 設定iframe的高度       // 將iframe新增到頁面的指定容器中       document.getElementById('trace-map-container').innerHTML = '';       document.getElementById('trace-map-container').appendChild(iframe);     } else {       // 如果API請求失敗，顯示錯誤資訊       alert('物流軌跡API請求失敗: ' + data.msg);     }   })   .catch(error => {     // 捕獲並處理可能的錯誤     alert('物流軌跡API請求異常: ' + error.message);   }); }


測試和部署


在本地環境中測試您的程式碼，確保使用者輸入資料後能夠正確顯示物流軌跡地圖。一旦測試完成並且一切正常，您可以將這些程式碼部署到您的生產伺服器上。最後我分享一個最近用到的非常好用的外掛，簡直是工作提效大幫手 —— 
Buffup.AI。使用 Buffup Chrome 擴充套件程式，您可以輕鬆地將 ChatGPT 和其他 AI 功能整合到您的日常任務中-無論是搜尋Web、傳送電子郵件、增強寫作還是翻譯文字。感興趣的同學快去 Chrome 外掛商店搜尋新增使用起來吧~


結語


透過上述步驟，您已經成功地建立了一個使用者友好的介面，使用者可以透過它查詢並檢視物流軌跡地圖。這不僅提升了使用者體驗，也展示了您對服務質量的承諾。在實際部署時，請確保替換所有佔位符為您的實際資料，並根據需要調整前端UI程式碼以適應您的網站設計。

來自 “ ITPUB部落格 ” ，連結：https://blog.itpub.net/70032654/viewspace-3007787/，如需轉載，請註明出處，否則將追究法律責任。

相關文章