当前位置: 首页 > news >正文

快递、外卖、网购自动定位及模糊检索收/发件地址功能实现

概述

目前快递、外卖、团购、网购等行业 :为了简化用户在收发件地址填写时的体验感,使用辅助定位及模糊地址检索来丰富用户的体验 本次demo分享给大家;让大家理解辅助定位及模糊地址检索的功能实现过程,以及开发出自己理想的作品

详细

概述:

    后台基于 SpringBoot+Fastjson+RestTemplate+BaiduMaP-Api

    前端基于 Html5+Jquery+Css+BaiduMap-SDK

    运行环境 Jdk1.8+Https

    Demo旨在帮助广大猿友们理解地址填写过程中辅助定位功能的实现

实现过程:

1、百度地图sdk 申请应用key(开发版本,免费)

    1.1、需要申请服务端和浏览器端两个key

image.png

    1.2、服务端key需要的权限

   

image.png

        1.3、浏览器端key需要权限

image.png

2、移动端构造地图Canvas 及调用定位sdk 获取经纬度

<script type="text/javascript"        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的key"></script>
<div id='allmap'></div>// 百度地图API功能 初始化
var map = new BMapGL.Map("allmap");
//初始化经纬度
var lng =114.311581;
var lat =30.598466;
var city = "北京";
map.centerAndZoom(new BMapGL.Point(lng, lat), 15); //地图级别1-21
map.enableScrollWheelZoom(true);
var geolocation = new BMapGL.Geolocation();
geolocation.enableSDKLocation();

3、调后台经纬度解析附近地址接口

var getLocationsByLngLat = function (lng, lat) {$.ajax({url: "/resolve/getLocationsByLngLat/" + lng + "/" + lat ,type: "get",dataType: "json",success: function (res) {console.log(res)debugger;if(res != null && res.results != null){city = res.results[0].city;}extracted(res);}});
}

4、调用后台地址检索接口

//地址检索
var getLocationsBySpace = function (space, city) {$.ajax({url: "/resolve/getLocationsByLngLat/" + lng + "/" + lat + "/" + space + "/" + city,type: "get",dataType: "json",success: function (res) {console.log(res)debugger;extracted(res);}});
}

5、样式实现css

ul {padding-left: 5px;border-bottom: 0.5px #CDC9C9 solid;padding-bottom: 3px;
}li {list-style: none;}ul span {display: inline-block;float: right;position: relative;right: 10px;bottom: 22px;
}

6、服务端常量配置

String = ;String = ;String = ;String = ;

7、RestTemplate get请求封装

JSON get(String uri,Map<String,Object> params){(params.isEmpty()){;}StringBuilder sb = StringBuilder();sb.append(uri);sb.append();(String key: params.keySet()){sb.append(key);sb.append();sb.append(params.get(key));sb.append();}.debug(,sb.toString());ResponseEntity<String> res = .getForEntity(sb.toString(),String.);JSON json = JSON.(res.getBody());json;}

8、两个点(经纬度)之间距离计算

String range(lon1, lat1, lon2, lat2) {distance = mathDistance(lon1, lat1, lon2, lat2); System..println(distance);range=;(distance > ) {range = () Math.(distance / ); }(range>&& range <){range+; }(range>=){()Math.(range / )+; }{+;}}

 

9、restfull 风格接口

 

()JSON getLocationsByLngLat(lng, lat) {Map<String, Object> params = generateLngLat(lng, lat);JSONObject res = ;{res = (JSONObject) .get(ParamsConstants., params);JSONArray results = res.getJSONArray();JSONArray results1 = JSONArray();(results.size() > ) {(i = ; i < results.size(); i++) {JSONObject result = generateResult(lng, lat, results, i);results1.add(result);}}res.put(,results1);} (Exception e) {.info(+ e.getMessage());}res;}

项目结构:

image.png

相关文章:

快递、外卖、网购自动定位及模糊检索收/发件地址功能实现

概述 目前快递、外卖、团购、网购等行业 &#xff1a;为了简化用户在收发件地址填写时的体验感&#xff0c;使用辅助定位及模糊地址检索来丰富用户的体验 本次demo分享给大家&#xff1b;让大家理解辅助定位及模糊地址检索的功能实现过程&#xff0c;以及开发出自己理想的作品…...

Springboot后端导入导出excel表

一、依赖添加 操作手册&#xff1a;Hutool — &#x1f36c;A set of tools that keep Java sweet. <!--hutool工具包--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.20</versio…...

通过stream流实现分页、模糊搜索、按列过滤功能

通过stream实现分页、模糊搜索、按列过滤功能 背景逻辑展示示例代码 背景 在有一些数据通过数据库查询出来后&#xff0c;需要经过一定的逻辑处理才进行前端展示&#xff0c;这时候需要在程序中进行相应的分页、模糊搜索、按列过滤了。这些功能通过普通的逻辑处理可能较为繁琐…...

webpack:系统的了解webpack一些核心概念

文章目录 webpack 如何处理应用程序&#xff1f;何为webpack模块chunk&#xff1f;入口(entry)输出(output)loader开发loader 插件(plugin)简介流程插件开发&#xff1a;Tapable类监听(watching)compiler 钩子compilation 钩子compiler和compilation创建自定义 插件 loader和pl…...

Unreal Engine Loop 流程

引擎LOOP 虚幻引擎的启动是怎么一个过程。 之前在分析热更新和加载流程过程中&#xff0c;做了一个图。记录一下&#xff01;&#xff01; ![在这里插入图片描述](https://img-blog.csdnimg.cn/f11f7762f5dd42f9b4dd9b7455fa7a74.png#pic_center 只是记录&#xff0c;以备后用…...

FLASK中的鉴权的插件Flask-HTTPAuth

在 Web 应用中&#xff0c;我们经常需要保护我们的 api&#xff0c;以避免非法访问。比如&#xff0c;只允许登录成功的用户发表评论等。Flask-HTTPAuth 扩展可以很好地对 HTTP 的请求进行认证&#xff0c;不依赖于 Cookie 和 Session。本文主要介绍两种认证的方式&#xff1a;…...

linux万字图文学习进程信号

1. 信号概念 信号是进程之间事件异步通知的一种方式&#xff0c;属于软中断。 1.1 linux中我们常用Ctrlc来杀死一个前台进程 1. Ctrl-C 产生的信号只能发给前台进程。一个命令后面加个&可以放到后台运行,这样Shell不必等待进程结束就可以接受新的命令,启动新的进程。2. S…...

DataX实现Mysql与ElasticSearch(ES)数据同步

文章目录 一、Linux环境要求二、准备工作2.1 Linux安装jdk2.2 linux安装python2.3 下载DataX&#xff1a; 三、DataX压缩包导入&#xff0c;解压缩四、编写同步Job五、执行Job六、定时更新6.1 创建定时任务6.2 提交定时任务6.3 查看定时任务 七、增量更新思路 一、Linux环境要求…...

第二章 进程与线程 十、调度算法1(先来先服务、短作业优先、最高响应比优先)

目录 一、先来先服务算法 1、算法思想 2、算法规则 3、用于作业/进程调度 4、是否可抢占? 5、优缺点 优点&#xff1a; 缺点&#xff1a; 6、是否会导致饥饿 7、例子 二、短作业优先算法 1、算法思想 2、算法规则 3、用于作业/进程调度 4、是否可抢占? 5、优缺…...

windows平台 git bash使用

打开所在需要git管理的目录,鼠标右键open Git BASH here 这样就直接进来,不需要windows dos窗口下麻烦的切路径&#xff0c;windows和linux 路径方向不一致 (\ /) 然后git init 建立本地仓库,接下来就是git相关的操作了. 图形化界面查看 打开所在需要git管理的目录,鼠标右键…...

Linux系统之安装uptime-kuma服务器监控面板

Linux系统之安装uptime-kuma服务器监控面板 一、uptime-kuma介绍1.1 uptime-kuma简介1.2 uptime-kuma特点 二、本次实践环境介绍2.1 环境规划2.2 本次实践介绍2.3 环境要求 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统是否安装Node.js 四、部署…...

计算机组成原理——基础入门总结(一)

本帖更新一些关于计算机组成原理的重点内容。由于博主考研时并不会考这门课&#xff0c;但是考虑到操作系统中又很多重要晦涩的概念涉及很多诸如内存、存储器、磁盘、cpu乃至各种寄存器的知识&#xff0c;此处挑选一些核心的内容总结复盘一遍——实现声明&#xff1a;本帖的内容…...

批量获取CSDN文章对文章质量分进行检测,有助于优化文章质量

&#x1f4da;目录 ⚙️简介✨分析获取步骤⛳获取文章列表☘️前期准备✨ 接口解析⚡️ 获取文章的接口 ☄️文章质量分接口⭐接口分析 ⌛代码实现&#xff1a;⚓核心代码:⛵测试用例:⛴ 运行效果:☘️增加Excel导出 ✍️结束 ⚙️简介 有时候我们写文章是为了记录当下遇到的bu…...

从一到无穷大 #17 Db2 Event Store,A Purpose-Built IoT Database Engine

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言Architectural overviewData format and meta-dataEnsuring fast ingestionMulti…...

9月16日,每日信息差

今天是2023年09月16日&#xff0c;以下是为您准备的15条信息差 第一、天猫超市首单“茅小凌”已由菜鸟送达&#xff0c;首单已由菜鸟供应链完成履约&#xff0c;18分钟送达消费者手中 第二、软银考虑对OpenAI进行投资。此外&#xff0c;软银还初步拟收购英国人工智能芯片制造…...

准备篇(二)Python 教程

Part 1 Python 基础语法区分输入与输出注释文本列表if 语句for 语句range() 函数走向编程的第一个例子Part 2 函数 和 数据结构函数数据结构del 语句列表详解元组集合字典循环的技巧Part 3 输入与输出读写文件打开文件 open()读文件写文件...

HTML+CSS画一个卡通中秋月饼

HTMLCSS画一个卡通中秋月饼&#x1f96e;&#x1f96e;&#x1f96e; 中秋活动水个文章 整个divcss实现个月饼&#xff0c;给前端初学者一个练手的demo 效果图 思路 HTMl 先来个轮廓画脸上的东西&#xff1a;眼睛、眉毛、腮红、嘴巴眼睛丰富下瞳孔画20个花瓣 CSS 轮廓是要外…...

echarts的折线图,在点击图例后,提示出现变化,不报错。tooltip的formatter怎么写

在点击图例的年后&#xff0c;提示框会相应的变化&#xff0c;多选和单选都会响应变化。tooptip的重度在formatter tooltip:{show:true,trigger:"axis",alwaysShowContent:true,triggerOn:"mousemove",textStyle:{color:"#fff"},backgroundColor…...

C++中的auto是一个关键字,用于在编译时自动推导变量的类型

C中的auto是一个关键字&#xff0c;用于在编译时自动推导变量的类型。通过使用auto关键字&#xff0c;编译器可以根据变量的初始化表达式来确定其类型&#xff0c;从而省略了显式地指定类型的步骤。 使用auto关键字声明的变量必须在定义时进行初始化&#xff0c;以便编译器可以…...

VUE build:gulp打包:测试、正式环境

目录 项目结构 Gulp VUE使用Gulp Vue安装Gulp Vue定义Gulp.js package.json build文件夹 config文件夹 static-config文件夹 项目结构 Gulp Gulp是一个自动化构建工具&#xff0c;可以帮助前端开发者通过自动化任务来管理工作流程。Gulp使用Node.js的代码编写&#xff…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...