快递、外卖、网购自动定位及模糊检索收/发件地址功能实现
概述
目前快递、外卖、团购、网购等行业 ：为了简化用户在收发件地址填写时的体验感，使用辅助定位及模糊地址检索来丰富用户的体验 本次demo分享给大家；让大家理解辅助定位及模糊地址检索的功能实现过程，以及开发出自己理想的作品
详细
概述：
后台基于 SpringBoot+Fastjson+RestTemplate+BaiduMaP-Api
前端基于 Html5+Jquery+Css+BaiduMap-SDK
运行环境 Jdk1.8+Https
Demo旨在帮助广大猿友们理解地址填写过程中辅助定位功能的实现
实现过程：
1、百度地图sdk 申请应用key（开发版本，免费）
1.1、需要申请服务端和浏览器端两个key
1.2、服务端key需要的权限
1.3、浏览器端key需要权限
2、移动端构造地图Canvas 及调用定位sdk 获取经纬度
// 百度地图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 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 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 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;
} 项目结构：
