整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在電子商務和在線購物日益普及的今天，為用戶提供實時的物流信息已成為提升客戶滿意度的關鍵。本文將指導您如何在網頁中嵌入物流軌跡地圖API，以便用戶能夠直觀地跟蹤他們的包裹。
首先，我們需要申請一個物流軌跡地圖API，這里我使用的是 APISpace 的 快遞物流訂閱與推送（含物流軌跡），里面有物流軌跡獲取API。登錄注冊進去就可以獲取到API密鑰，也就是X-Apispace-Token。
https://www.apispace.com/eolink/api/wldtgj1/introduction?utm_source=tth&utm_content=deep&utm_term=wuliudituguiji
有了接口，我們需要創建一個簡單的前端界面，讓用戶輸入必要的信息并發起查詢。以下是一個基本的HTML和CSS代碼示例，用于構建用戶輸入界面：
<!DOCTYPE html>
<html lang="en">
<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" onclick="queryTrace()">查詢物流軌跡</button>
</form>
<div id="trace-map-container"></div>
</body>
</html>接下來，我們將編寫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('https://eolink.o.apispace.com/wldtgj1/paidtobuy_api/trace_map', {
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 插件商店搜索添加使用起來吧~
https://chromewebstore.google.com/detail/buffup-the-ai-copilot-of/nldfkphmngahpfflbfihipoahbbgbhca?utm_source=tth&utm_content=deep&utm_term=wuliudituguiji
通過上述步驟，您已經成功地創建了一個用戶友好的界面，用戶可以通過它查詢并查看物流軌跡地圖。這不僅提升了用戶體驗，也展示了您對服務質量的承諾。在實際部署時，請確保替換所有占位符為您的實際數據，并根據需要調整前端UI代碼以適應您的網站設計。
話不多說，看圖！
本篇文章介紹 Vue3 + vite +TS 項目內使用 Echarts 5 繪制中國地圖，標記分布點！之前沒有接觸過 Echarts 的，可以先去官方示例看看，里面圖形特別齊全。但是官方文檔看著費勁的，太多了根本記不住，所以自己做個總結，下次就可以直接使用了，不用做重復無用功。
Echarts 已更新到了 5.0 版本，安裝完記得檢查下自己的版本是否是 5.0 。
npm install echarts --save安裝完成之后，在 package.json 中檢查是否安裝成功？
可以下載中國以及各個省份地圖數據。免費的文件下載地址：
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
記得收藏哦！免得浪費加班時間。
引入 echarts 可以全局引入：
import * as echarts from "echarts"
/* 之前vue2 */
Vue.prototype.$ecahrt=echarts
/* vue3 */
app.config.globalProperties.$echarts=echarts也可以直接在繪制頁面內按需引用。
引入需要繪制的地圖數據 json 或 js 文件，本文使用的是 json 格式：
import chinaJSON from '../../assets/json/china.json'注意：引入的時候先引入 echarts ，后引入 chinaJSON 文件，順序不能反哦！
template 部分代碼：
<template>
<div>
<div
ref="chinaMap"
style="height: 700px;border: solid 1px red;width: 100%;background: #010111;"
>
地圖1
</div>
</div>
</template>script 部分代碼：
<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJSON from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap=ref()
onMounted(()=> {
drawChina()
})
let regions=[
{
name: '新疆維吾爾自治區',
itemStyle: {
areaColor: '#374ba4',
opacity: 1,
},
},
{
name: '四川省',
itemStyle: {
areaColor: '#fe9b45',
opacity: 1,
},
},
{
name: '陜西省',
itemStyle: {
areaColor: '#fd691b',
opacity: 1,
},
},
{
name: '黑龍江省',
itemStyle: {
areaColor: '#ffc556',
opacity: 1,
},
},
]
let scatter=[
{ name: '北京烤鴨', value: [116.46122, 39.97886, 9] },
{ name: '蘭州拉面', value: [103.86615, 36.040129, 9] },
{ name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
{ name: '長沙臭豆腐', value: [112.915204, 28.207735, 9] },
{ name: '西安肉夾饃', value: [108.953445, 34.288842, 9] },
{ name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
var myChart=echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJSON) //注冊可用的地圖
var option={
geo: {
map: 'china',
roam: true, //是否允許縮放，拖拽
zoom: 1, //初始化大小
//縮放大小限制
scaleLimit: {
min: 1, //最小
max: 2, //最大
},
//設置中心點
center: [115.97, 29.71],
//省份地圖添加背景
regions: regions,
itemStyle: {
areaColor: '#0b122e',
color: 'red',
borderColor: '#232652',
borderWidth: 2,
},
//高亮狀態
emphasis: {
itemStyle: {
areaColor: '#1af9e5',
color: '#fff',
},
},
},
//配置屬性
series: {
type: 'effectScatter',
coordinateSystem: 'geo',
data: scatter,
showEffectOn: 'render',
rippleEffect: {
//漣漪特效相關配置
brushType: 'stroke', //波紋的繪制方式，可選 'stroke' 和 'fill'
},
hoverAnimation: true, //是否開啟鼠標 hover 的提示動畫效果
label: {
//圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等，
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
},
itemStyle: {
//圖形樣式，normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時
normal: {
color: '#ffffff', //散點的顏色
shadowBlur: 10,
shadowColor: 20,
fontSize: '12px',
},
},
zlevel: 1,
},
}
myChart.setOption(option)
}
</script>想看更多的可以去官方文檔：
https://echarts.apache.org/zh/option.html#geo.regions.emphasis.itemStyle
站地圖是一個關鍵的元素，可以幫助搜索引擎更好地理解和索引你的網站內容，從而提升網站的排名并吸引更多的訪問者。本文將詳細介紹如何在網站中制作網站地圖，幫助你優化網站并獲得爆款流量。
第一步：了解網站地圖的作用
在開始制作網站地圖之前，先了解一下網站地圖的作用和重要性。網站地圖可以幫助搜索引擎更好地抓取和索引你的網站內容，提高網站在搜索結果中的排名。同時，網站地圖還可以提升用戶體驗，讓訪問者更輕松地找到他們需要的信息。
第二步：選擇適合的網站地圖類型
根據你的網站類型和需求，選擇適合的網站地圖類型。常見的網站地圖類型包括HTML網站地圖和XML網站地圖。HTML網站地圖適用于小型網站，可以直接呈現給用戶查看；XML網站地圖適用于大型網站，向搜索引擎提供更詳細的信息。
第三步：制作HTML網站地圖
如果你選擇制作HTML網站地圖，可以采用以下步驟：
1、創建一個新的HTML頁面，命名為sitemap.html。
2、在頁面中添加網站的主要頁面鏈接，按照邏輯結構進行分類和分組。
3、使用合適的標題和描述，讓訪問者更容易理解和導航你的網站內容。
4、確保每個鏈接可點擊，并指向正確的頁面。
5、將sitemap.html文件上傳到你的網站根目錄中。
6、在網站的主頁或其他適當的位置添加一個指向sitemap.html的鏈接，方便訪問者查看網站地圖。
<footer>
<a href="/sitemap.html">網站地圖</a>
</footer>第四步：制作XML網站地圖
如果你選擇制作XML網站地圖，可以采用以下步驟：
1、創建一個新的XML文件，命名為sitemap.xml。
2、使用XML語法編寫網站地圖的內容，包括每個頁面的URL、最后修改時間、更新頻率和優先級等信息。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/page1</loc>
<lastmod>2022-01-01</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://example.com/page2</loc>
<lastmod>2022-01-02</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<!-- 添加更多的URL -->
</urlset>3、確保每個URL都正確且完整，以便搜索引擎能夠準確抓取和索引網站的內容。
4、將sitemap.xml文件上傳到你的網站根目錄中。
5、在robots.txt文件中添加一個指向sitemap.xml的鏈接，以便搜索引擎能夠找到并讀取網站地圖。
第五步：提交網站地圖到搜索引擎
完成網站地圖的制作后，需要將它提交給搜索引擎。常見的搜索引擎如Google、Bing等都提供了網站地圖提交的功能。你只需登錄到相應的搜索引擎站長工具平臺，按照指引將網站地圖鏈接提交給搜索引擎即可。
第六步：定期更新和監測網站地圖
定期檢查和更新你的網站地圖，確保其中的鏈接和信息是最新的。當你添加新的頁面或進行網站結構調整時，記得更新網站地圖，以保持其準確性。同時，使用搜索引擎的站長工具平臺來監測網站地圖的正確性，及時修復任何錯誤。
結語
通過制作一個優化的網站地圖，你可以提升網站的排名，并獲得更多的爆款流量。在制作網站地圖的過程中，要選擇適合的地圖類型，制作HTML或XML網站地圖，并定期更新和監測地圖的正確性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
