5分钟学会物流轨迹地图API嵌入到页面中，实现物流轨

5分钟学会物流轨迹地图API嵌入到页面中，实现物流轨迹可视化

言

在电子商务和在线购物日益普及的今天，为用户提供实时的物流信息已成为提升客户满意度的关键。本文将指导您如何在网页中嵌入物流轨迹地图API，以便用户能够直观地跟踪他们的包裹。

1.申请接口、获取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

2.前端页面UI代码

有了接口，我们需要创建一个简单的前端界面，让用户输入必要的信息并发起查询。以下是一个基本的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>

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('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 中检查是否安装成功？

二、下载地图的 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网站地图，并定期更新和监测地图的正确性。

在线咨询

上一篇：IntelliJ IDEA 部署 Web 项目，终于
下一篇：如何降低网站跳出率？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商