TP8上传Excel地址数据批量标注到高德地图

一、上传表格提取地址数据,统计同一地址数量,转化经纬度。

部分代码如下:

bash 复制代码
// 处理Excel上传和地址解析

    public function uploadExcel(Request $request)
    {
        $file = $request->file('excel_file');

        if (empty($file)) {
            return json(['code' => 0, 'msg' => '未上传文件']);
        }

        // 移动文件到临时目录
        $info = $file->move('/www/wwwroot/113.45.17.169_93/public/uploads');

        if (!$info) {

            return json(['code' => 0, 'msg' => $file->getError()]);
        }



        $filePath = $info->getRealPath();


        try {

            // 解析Excel文件
            $spreadsheet = IOFactory::load($filePath);
            $worksheet = $spreadsheet->getActiveSheet();
            $rows = $worksheet->toArray();

            if (count($rows) < 2) {
                return json(['code' => 0, 'msg' => '表格中没有有效数据']);
            }

            // 获取表头
            $header = array_shift($rows);
            $addressIndex = array_search('地址', $header);

            if ($addressIndex === false) {
                return json(['code' => 0, 'msg' => '未找到"地址"列']);
            }

            // 提取地址并统计数量
            $addresses = array_column($rows, $addressIndex);
            $addressCounts = array_count_values(array_filter($addresses));

            // 转换为地理坐标
            $locations = [];
            foreach ($addressCounts as $address => $count) {
                $coords = $this->geocodeAddress($address);
                if ($coords) {
                    $locations[] = [
                        'address' => $address,
                        'lat' => $coords['lat'],
                        'lng' => $coords['lng'],
                        'count' => $count
                    ];
                }
            }

           try {
                Db::startTrans();
                Db::name('address_location')->where('1=1')->delete();
                Db::name('address_location')->insertAll($locations);
                Db::commit();
            } catch (\Exception $e) {
                Db::rollback();
                echo "插入失败:" . $e->getMessage(); // 输出具体错误信息
            }

            // 保存到数据库
            // Db::name('address_location')->where('1=1')->delete();
            // foreach ($locations as $location) {
            //     $datasz=$location;
            //     $aa=Db::name('address_location')->insert($datasz);
            // }

            return json(['code' => 1, 'msg' => '处理成功', 'data' => $locations]);
        } catch (\Exception $e) {

            return json(['code' => 0, 'msg' => '处理文件时出错: ' . $e->getMessage()]);
        }
    }

二、前端展示地图,按照获取地址做出标记。

部分代码如下:

bash 复制代码
<div class="container mx-auto px-4 py-8">
        <header class="text-center mb-10">
            <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Excel地址数据地图标注系统</h1>
            <p class="text-gray-600">上传包含地址信息的Excel文件,在高德地图上批量标注地址分布</p>
        </header>

        <main class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <section class="mb-8">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-file-excel text-green-600 mr-2"></i>上传Excel文件
                </h2>
                <form id="uploadForm" enctype="multipart/form-data" class="space-y-4">
                    <div>
                        <label for="excelFile" class="block text-sm font-medium text-gray-700 mb-2">
                            选择Excel文件 (需包含"地址"列)
                        </label>
                        <div id="fileDropArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-all hover:border-indigo-400">
                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
                            <p class="text-gray-600 mb-2">拖拽文件到此处或点击选择文件</p>
                            <p class="text-sm text-gray-500">支持 .xlsx, .xls 格式</p>
                            <input type="file" id="excelFile" name="excel_file" accept=".xlsx,.xls" class="hidden">
                        </div>
                        <div id="fileInfo" class="mt-3 text-sm text-gray-600 hidden">
                            <span id="fileName"></span>
                            <span id="fileSize"></span>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <button type="submit" id="uploadBtn" class="inline-flex items-center px-5 py-2.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50">
                            <i class="fas fa-upload mr-2"></i>上传并标注
                        </button>
                        <button type="button" id="showMapBtn" class="inline-flex items-center px-5 py-2.5 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <i class="fas fa-map-marked-alt mr-2"></i>显示地图
                        </button>
                    </div>
                </form>
            </section>

            <section>
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-map-marked-alt text-indigo-600 mr-2"></i>地址分布地图
                </h2>
                <div id="mapContainer" class="w-full bg-gray-100 flex items-center justify-center">
                    <p class="text-gray-500">地图将在此处显示</p>
                </div>
                <div id="mapInfo" class="mt-4 text-sm text-gray-600 hidden">
                    <p>共标注 <span id="addressCount" class="font-semibold text-indigo-700"></span> 个不同地址位置</p>
                </div>
            </section>
        </main>

        <div id="loadingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
            <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
                <div class="flex items-center mb-4">
                    <div class="w-8 h-8 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin mr-3"></div>
                    <h3 class="text-lg font-medium text-gray-900">正在处理数据</h3>
                </div>
                <p class="text-gray-600 mb-4" id="loadingText">正在上传文件...</p>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div id="progressBar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
            </div>
        </div>

        <footer class="text-center text-gray-500 text-sm mt-12">
            <p>© 2025 Excel地址数据地图标注系统. All rights reserved.</p>
        </footer>
    </div>

三、效果图如下

上传部分

地图标记

上传表格数据

相关推荐
qq192572302714 小时前
mysql高级查询
数据库·mysql
dishugj14 小时前
【oracle】 RMAN数据库迁移 19c(RAC到单实例)
数据库·oracle
TDengine (老段)14 小时前
TDengine JAVA 语言连接器入门指南
java·大数据·开发语言·数据库·python·时序数据库·tdengine
魅惑青花瓷14 小时前
【EXCEL动态获取数据范围并整列自动填充公式】
excel
oMcLin14 小时前
如何在Ubuntu 22.04上通过配置LVM优化存储,提升香港服务器的大规模数据库的读写性能?
服务器·数据库·ubuntu
艾莉丝努力练剑14 小时前
【QT】初识QT:背景介绍
java·运维·数据库·人工智能·qt·安全·gui
Neolnfra14 小时前
openGauss部署配置指南
数据库·opengauss·gaussdb
小股虫14 小时前
心脏手术指南:如何安全地为运行中的系统更换“数据库引擎”?
数据库·安全·架构·方法论
Jsundoku14 小时前
PostgreSQL -- 开源对象-关系型数据库
数据库·postgresql·关系型数据库