使用 HTML + JavaScript 在高德地图上实现物流轨迹跟踪系统

article/2025/6/22 4:57:11

在电商行业蓬勃发展的今天，物流信息查询已成为人们日常生活中的重要需求。本文将详细介绍如何基于高德地图 API 利用 HTML + JavaScript 实现物流轨迹跟踪系统的开发。

效果演示

image-20250529221124588

image-20250529221146585

image-20250529221226265

项目概述

本项目主要包含以下核心功能：

  • 地图初始化与展示
  • 运单号查询功能
  • 物流轨迹可视化显示

准备工作

  1. 注册高德开放平台账号，创建应用并获取API Key。

  2. 引入高德地图 API （将 API_Key 替换为自己的）和德地图 UI 组件库

<script src="https://webapi.amap.com/maps?v=2.0&key=API_Key"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>

页面结构与样式设计

创建 HTML 结构

页面主要包含两个核心区域：

  • container：用于承载地图展示的核心区域
  • panel：右上角的操作面板，包含输入框、查询按钮和物流信息展示区
<div id="container"></div>
<div id="panel"><h3>物流轨迹查询</h3><div class="input-group"><input type="text" id="orderNumber" placeholder="请输入运单号"></div><button id="queryBtn">查询轨迹</button><div id="logistics-info"></div>
</div>
设计 CSS 样式

地图容器样式

#container {width: 100%;height: 100vh;position: relative;
}

操作面板样式

#panel {position: absolute;top: 10px;right: 10px;width: 300px;background: white;padding: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.2);z-index: 999;border-radius: 5px;
}
.input-group {margin-bottom: 10px;
}
input, button {padding: 8px;width: 100%;box-sizing: border-box;
}
button {background: #1E90FF;color: white;border: none;cursor: pointer;
}
button:hover {background: #1874CD;
}
#logistics-info {margin-top: 10px;font-size: 14px;max-height: 300px;overflow-y: auto;
}
.info-item {margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid #eee;
}
.info-time {color: #888;font-size: 12px;
}
.info-content {color: #333;
}

核心功能实现

初始化地图
var map = new AMap.Map('container', {zoom: 10,  // 缩放级别center: [116.397428, 39.90923],  // 中心点坐标（北京）viewMode: '2D'  // 使用2D视图
});
获取物流数据

这里只是示例，模拟了不同运单号返回不同数据，实际应用中可以通过请求后端 API 获取真实数据。

function getLogisticsData(orderNumber) {if (orderNumber === "123456") {return {status: "success",company: "顺丰速运",number: orderNumber,steps: [{time: "2023-05-01 08:00:00",location: [116.404, 39.915],content: "快件已到达【北京朝阳集散中心】"},// ...]};} else if (orderNumber === "654321") {return {status: "success",company: "中通快递",number: orderNumber,steps: [// ...]};} else {return {status: "error",message: "未找到该运单号的物流信息"};}
}
清除地图上的轨迹和标记
function clearMap() {if (polyline) {map.remove(polyline);polyline = null;}if (markers.length > 0) {map.remove(markers);markers = [];}
}
显示物流轨迹
function showLogisticsTrack(data) {// 清除之前的轨迹clearMap();// 更新物流信息显示var infoDiv = document.getElementById('logistics-info');infoDiv.innerHTML = '';if (data.status === "error") {infoDiv.innerHTML = '<div class="info-item">' + data.message + '</div>';return;}// 显示物流公司信息infoDiv.innerHTML += '<div class="info-item"><strong>' + data.company + '</strong> 运单号: ' + data.number + '</div>';// 提取轨迹点坐标var lineArr = [];// 按时间顺序排序（确保最早的步骤在最前面）data.steps.sort(function(a, b) {return new Date(a.time) - new Date(b.time);});// 添加标记和轨迹线data.steps.forEach(function(step, index) {// 添加到轨迹线lineArr.push(step.location);// 创建标记var marker = new AMap.Marker({position: step.location,map: map,content: '<div style="background: #1E90FF; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px;">' + (index + 1) + '</div>',offset: new AMap.Pixel(-10, -10)});// 信息窗口内容var infoContent = '<div style="padding: 5px;">' +'<div style="font-weight: bold;">步骤 ' + (index + 1) + '</div>' +'<div>' + step.content + '</div>' +'<div style="color: #888; font-size: 12px;">' + step.time + '</div>' +'</div>';// 点击标记显示信息窗口marker.on('click', function() {new AMap.InfoWindow({content: infoContent,offset: new AMap.Pixel(0, -30)}).open(map, step.location);});markers.push(marker);// 添加物流信息到面板infoDiv.innerHTML += '<div class="info-item">' +'<div class="info-time">' + step.time + '</div>' +'<div class="info-content">' + step.content + '</div>' +'</div>';});// 绘制轨迹线polyline = new AMap.Polyline({path: lineArr,isOutline: true,outlineColor: '#ffeeff',borderWeight: 1,strokeColor: "#3366FF",strokeOpacity: 1,strokeWeight: 5,strokeStyle: "solid",lineJoin: 'round',lineCap: 'round',zIndex: 50});map.add(polyline);// 调整视图以适应轨迹map.setFitView(polyline);
}
查询功能实现

输入运单号，点击【查询轨迹】按钮获取输入框中的运单号，根据运单号获取物流数据，显示物流轨迹。

document.getElementById('queryBtn').addEventListener('click', function() {var orderNumber = document.getElementById('orderNumber').value.trim();if (!orderNumber) return;var logisticsData = getLogisticsData(orderNumber);showLogisticsTrack(logisticsData);
});

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>物流轨迹跟踪系统</title><style>body, html {margin: 0;padding: 0;}#container {width: 100%;height: 100vh;position: relative;}#panel {position: absolute;top: 10px;right: 10px;width: 300px;background: white;padding: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.2);z-index: 999;border-radius: 5px;}.input-group {margin-bottom: 10px;}input, button {padding: 8px;width: 100%;box-sizing: border-box;}button {background: #1E90FF;color: white;border: none;cursor: pointer;}button:hover {background: #1874CD;}#logistics-info {margin-top: 10px;font-size: 14px;max-height: 300px;overflow-y: auto;}.info-item {margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid #eee;}.info-time {color: #888;font-size: 12px;}.info-content {color: #333;}</style>
</head>
<body>
<div id="container"></div>
<div id="panel"><h3>物流轨迹查询</h3><div class="input-group"><input type="text" id="orderNumber" placeholder="请输入运单号"></div><button id="queryBtn">查询轨迹</button><div id="logistics-info"></div>
</div><!-- 引入高德地图API -->
<script src="https://webapi.amap.com/maps?v=2.0&key=API_Key"></script>
<!-- 引入高德地图UI组件库 -->
<script src="https://webapi.amap.com/ui/1.1/main.js"></script><script>// 初始化地图var map = new AMap.Map('container', {zoom: 10,  // 缩放级别center: [116.397428, 39.90923],  // 中心点坐标（北京）viewMode: '2D'  // 使用2D视图});// 轨迹线var polyline = null;// 轨迹点标记var markers = [];// 模拟物流数据（实际应用中应从后端API获取）function getLogisticsData(orderNumber) {if (orderNumber === "123456") {return {status: "success",company: "顺丰速运",number: orderNumber,steps: [{time: "2023-05-01 08:00:00",location: [116.404, 39.915],content: "快件已到达【北京朝阳集散中心】"},{time: "2023-05-01 10:30:00",location: [116.408, 39.925],content: "快件已从【北京朝阳集散中心】发出，下一站【北京海淀集散中心】"},{time: "2023-05-01 14:15:00",location: [116.300, 39.960],content: "快件已到达【北京海淀集散中心】"},{time: "2023-05-02 09:00:00",location: [116.310, 39.980],content: "快件正在派送中，派件员：张三，电话：138****1234"},{time: "2023-05-02 11:30:00",location: [116.315, 39.985],content: "快件已签收，签收人：李四"}]};} else if (orderNumber === "654321") {return {status: "success",company: "中通快递",number: orderNumber,steps: [{time: "2023-05-10 13:20:00",location: [121.4737, 31.2304],content: "快件已从【上海虹口集散中心】发出"},{time: "2023-05-11 08:45:00",location: [120.1551, 30.2741],content: "快件已到达【杭州集散中心】"},{time: "2023-05-11 16:30:00",location: [120.2108, 30.2468],content: "快件已从【杭州集散中心】发出，下一站【杭州西湖分部】"}]};} else {return {status: "error",message: "未找到该运单号的物流信息"};}}// 清除地图上的轨迹和标记function clearMap() {if (polyline) {map.remove(polyline);polyline = null;}if (markers.length > 0) {map.remove(markers);markers = [];}}// 显示物流轨迹function showLogisticsTrack(data) {// 清除之前的轨迹clearMap();// 更新物流信息显示var infoDiv = document.getElementById('logistics-info');infoDiv.innerHTML = '';if (data.status === "error") {infoDiv.innerHTML = '<div class="info-item">' + data.message + '</div>';return;}// 显示物流公司信息infoDiv.innerHTML += '<div class="info-item"><strong>' + data.company + '</strong> 运单号: ' + data.number + '</div>';// 提取轨迹点坐标var lineArr = [];// 按时间顺序排序（确保最早的步骤在最前面）data.steps.sort(function(a, b) {return new Date(a.time) - new Date(b.time);});// 添加标记和轨迹线data.steps.forEach(function(step, index) {// 添加到轨迹线lineArr.push(step.location);// 创建标记var marker = new AMap.Marker({position: step.location,map: map,content: '<div style="background: #1E90FF; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px;">' + (index + 1) + '</div>',offset: new AMap.Pixel(-10, -10)});// 信息窗口内容var infoContent = '<div style="padding: 5px;">' +'<div style="font-weight: bold;">步骤 ' + (index + 1) + '</div>' +'<div>' + step.content + '</div>' +'<div style="color: #888; font-size: 12px;">' + step.time + '</div>' +'</div>';// 点击标记显示信息窗口marker.on('click', function() {new AMap.InfoWindow({content: infoContent,offset: new AMap.Pixel(0, -30)}).open(map, step.location);});markers.push(marker);// 添加物流信息到面板infoDiv.innerHTML += '<div class="info-item">' +'<div class="info-time">' + step.time + '</div>' +'<div class="info-content">' + step.content + '</div>' +'</div>';});// 绘制轨迹线polyline = new AMap.Polyline({path: lineArr,isOutline: true,outlineColor: '#ffeeff',borderWeight: 1,strokeColor: "#3366FF",strokeOpacity: 1,strokeWeight: 5,strokeStyle: "solid",lineJoin: 'round',lineCap: 'round',zIndex: 50});map.add(polyline);// 调整视图以适应轨迹map.setFitView(polyline);}// 查询按钮点击事件document.getElementById('queryBtn').addEventListener('click', function() {var orderNumber = document.getElementById('orderNumber').value.trim();if (!orderNumber) return;var logisticsData = getLogisticsData(orderNumber);showLogisticsTrack(logisticsData);});
</script>
</body>
</html>

http://www.hkcw.cn/article/DdhvRehbVN.shtml

相关文章

HTML Day04

HTML Day04

Day04 0.引言1. HTML字符实体2. HTML表单2.1 表单标签2.2 表单示例 3. HTML框架4. HTML颜色4.1 16进制表示法4.2 rgba表示法4.3 名称表达法 5. HTML脚本 0.引言 刚刚回顾了前面几篇博客&#xff0c;感觉写的内容倒是很详细&#xff0c;每个知识点都做了说明。但是感觉在知识组织…
阅读更多...
命令行式本地与服务器互传文件

命令行式本地与服务器互传文件

文章目录 1. 背景2. 传输方式2.1 SCP 协议传输2.2 SFTP 协议传输 命令行式本地与服务器互传文件 1. 背景 多设备协同工作中&#xff0c;因操作系统的不同&#xff0c;我们经常需要将另外一个系统中的文件传输到本地PC进行浏览、编译。多设备文件互传&#xff0c;在嵌入式开发中…
阅读更多...
进程间通信III·System V 系列(linux)

进程间通信III·System V 系列(linux)

目录 为什么有system V 共享内存 原理 操作 shmget 创建共享内存 shmctl 控制共享内存 shmat 挂接共享内存到进程的虚拟地址空间中 shmdt 将共享内存去关联 特点 模拟练习 Makefile client.cpp server.cpp main.hpp 小知识 为什么有system V linux是一种类unix系…
阅读更多...
Kafka 如何保证顺序消费

Kafka 如何保证顺序消费

在消息队列的应用场景中&#xff0c;保证消息的顺序消费对于一些业务至关重要&#xff0c;例如金融交易中的订单处理、电商系统的库存变更等。Kafka 作为高性能的分布式消息队列系统&#xff0c;通过巧妙的设计和配置&#xff0c;能够实现消息的顺序消费。接下来&#xff0c;我…
阅读更多...
数据结构：栈（Stack）和堆（Heap）

数据结构：栈（Stack）和堆（Heap）

目录 内存&#xff08;Memory&#xff09;基础 程序是如何利用主存的&#xff1f; &#x1f3af; 静态内存分配 vs 动态内存分配 栈&#xff08;stack&#xff09; 程序执行过程与栈帧变化 堆&#xff08;Heap&#xff09; 程序运行时的主存布局 内存&#xff08;Memo…
阅读更多...
数字权限管理（DRM）：保护数字内容安全的小卫士

数字权限管理（DRM）：保护数字内容安全的小卫士

《数字权限管理&#xff08;DRM&#xff09;&#xff1a;保护数字内容安全的小卫士》 在当今数字化飞速发展的时代&#xff0c;我们每天都在和各种各样的数字内容打交道&#xff0c;像电子书、音乐、电影、软件等等。然而&#xff0c;这些数字内容的版权保护和访问控制也成为了…
阅读更多...
进程同步：生产者-消费者 题目

进程同步：生产者-消费者 题目

正确答案&#xff1a; 问题类型&#xff1a; 经典生产者 - 消费者问题 同时涉及同步和互斥。 同步&#xff1a;生产者与消费者通过信号量协调生产 / 消费节奏&#xff08;如缓冲区满时生产者等待&#xff0c;空时消费者等待&#xff09;。互斥&#xff1a;对共享缓冲区的访问需…
阅读更多...
【第三十八周】BLIP-2：一种高效的视觉语言预训练框架

【第三十八周】BLIP-2：一种高效的视觉语言预训练框架

BLIP-2 摘要Abstract文章信息引言方法模型结构Stage1:表征学习Stage2:生成学习模型预训练 实验结果总结 摘要 本篇博客介绍了BLIP-2 &#xff0c;这是一种面向通用多模态任务的高效视觉语言预训练框架&#xff0c;其核心思想是在冻结大语言模型的前提下&#xff0c;通过引入一…
阅读更多...
算法打卡12天

算法打卡12天

19.链表相交 &#xff08;力扣面试题 02.07. 链表相交&#xff09; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交**&#xff1a;** 题目数据…
阅读更多...
Redis最佳实践——安全与稳定性保障之连接池管理详解

Redis最佳实践——安全与稳定性保障之连接池管理详解

Redis 在电商应用的连接池管理全面详解 一、连接池核心原理与架构 1. 连接池工作模型 #mermaid-svg-G7I3ukCljlJZAXaA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-G7I3ukCljlJZAXaA .error-icon{fill:#552222;}…
阅读更多...
无人机+AI视频联网：精准狙击，让‘罪恶之花’无处藏身

无人机+AI视频联网：精准狙击，让‘罪恶之花’无处藏身

引言&#xff1a;禁毒攻坚战&#xff0c;科技是关键 今天是2025年5&#xff0c;正值罂粟等毒株生长关键期。传统人工巡查耗时长、盲区多&#xff0c;而无人机巡检视频AI分析的智慧禁毒方案&#xff0c;正以“高空鹰眼地面AI”的立体化监控网络&#xff0c;实现毒株种植的早发现…
阅读更多...
以太网原理与开发802.3

以太网原理与开发802.3

W5500以太网搭建 官方移植库W5500 下载地址：GitCode - 全球开发者的开源社区,开源代码托管平台目录结构Ethernet以太网移植文件文件wizchip_conf 配置 芯片型号 工作模式 wizchip_conf.c配置 临界区片选SPI收发字节配置 自定义注册SPI // 自定义注册SPI相关回调函数 void use…
阅读更多...
day5 cpp:，对象的组织(const对象)，

day5 cpp:，对象的组织(const对象)，

1.对象的组织(类比内置类型) const对象 const对象只能调用const成员函数和数据成员&#xff0c;除了四大金刚 若成员函数没有加const(void print() const{}),即便里面没有_ix100修改值&#xff0c;也不能pt2.print()访问&#xff0c;因为是const Point pt2(3,5)--->对象不…
阅读更多...
C语言进阶--动态内存管理

C语言进阶--动态内存管理

学习数据结构重要的三个部分&#xff1a;指针、结构体、动态内存管理&#xff08;malloc、calloc、realloc、free&#xff09;。 1.为什么存在动态内存分配&#xff1f; 1.空间开辟大小是固定的&#xff1b; 2.数组在声明时&#xff0c;必须指定数组的长度&#xff0c;它所需…
阅读更多...
Excel如何去除公式保留数值

Excel如何去除公式保留数值

我们有时候使用Excel在修改一部分数值的时候会导致和该数值相关的通过公式进行计算的数值发生变化&#xff0c;但有时我们不想改变这些数值&#xff0c;同样的有时我们在移动一些数值的时候会导致通过这些数值计算的数值变为#!VALUE&#xff0c;这是我们不想发生的&#xff0c;…
阅读更多...
C++学习-入门到精通【11】输入/输出流的深入剖析

C++学习-入门到精通【11】输入/输出流的深入剖析

C学习-入门到精通【11】输入/输出流的深入剖析 目录 C学习-入门到精通【11】输入/输出流的深入剖析一、流1.传统流和标准流2.iostream库的头文件3.输入/输出流的类的对象 二、输出流1.char* 变量的输出2.使用成员函数put进行字符输出 三、输入流1.get和getline成员函数2.istrea…
阅读更多...
一周学会Pandas2之Python数据处理与分析-数据重塑与透视-melt() - 融化 / 逆透视 (宽 -＞ 长)

一周学会Pandas2之Python数据处理与分析-数据重塑与透视-melt() - 融化 / 逆透视 (宽 -＞ 长)

锋哥原创的Pandas2 Python数据处理与分析 视频教程&#xff1a; 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili melt() 是 pandas 中用于数据重塑的核心方法之一&#xff0c;它可以将 宽格式数据 转换为 长格式数据&#xff0c;特…
阅读更多...
设计模式——工厂方法模式（创建型）

设计模式——工厂方法模式（创建型）

摘要 工厂方法模式是一种创建型设计模式&#xff0c;通过定义创建对象的接口&#xff0c;让子类决定实例化哪个类。它包含抽象产品、具体产品、抽象工厂和具体工厂等角色。该模式使类的实例化延迟到子类&#xff0c;具有良好的扩展性和灵活性&#xff0c;适用于多种场景&#…
阅读更多...
软件性能之CPU

软件性能之CPU

性能是个宏大而驳杂话题&#xff0c;从代码&#xff0c;到网络&#xff0c;到实施&#xff0c;方方面面都会涉及到性能问题&#xff0c;网上对性能讲解的文章多如牛毛&#xff0c;从原理到方法再到工具都有详细的介绍&#xff0c;本文虽不能免俗&#xff0c;但期望能从另外一个…
阅读更多...
腾讯云推出云开发AI Toolkit，国内首个面向智能编程的后端服务

腾讯云推出云开发AI Toolkit，国内首个面向智能编程的后端服务

5月28日&#xff0c;腾讯云开发 CloudBase 宣布推出 AI Toolkit&#xff08;CloudBase AI Toolkit&#xff09;&#xff0c;这是国内首个面向智能编程的后端服务&#xff0c;适配 Cursor 等主流 AI 编程工具。 云开发 AI Toolkit旨在解决 AI 辅助编程的“最后一公里”问题&…
阅读更多...
推荐文章

Copyright @ 2022~2023