java之uniapp实现门店地图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、后台实现
- [1. 获取门店的经纬度](#1. 获取门店的经纬度)
- 2.api查询对应的sql
[二、小程序实现](#二、小程序实现)

前言

实现查询门店地址的功能，可以按照距离排序。使用技术：java+mysql+uniapp百度地图+高德获取经纬度

提示：以下是本篇文章正文内容，下面案例可供参考

一、后台实现

1. 获取门店的经纬度

可以通过高德或者百度的api接口传入地址获取经纬度。

这里我使用的是高德，高德api文档地址

将拉取过来的经纬度存入到数据库中

sql 复制代码

CREATE TABLE `ums_member_company_coordinate` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `company_name` varchar(255) DEFAULT NULL,
  `address_detail` varchar(255) DEFAULT NULL COMMENT '详细地址\n',
  `address_province` varchar(20) DEFAULT NULL COMMENT '地址-省',
  `address_city` varchar(20) DEFAULT NULL COMMENT '地址-市',
  `address_county` varchar(20) DEFAULT NULL COMMENT '地址-县(区、市）',
	`location` point NOT NULL COMMENT '经纬度',
  PRIMARY KEY (`id`) USING BTREE,
  SPATIAL KEY `spatial_index_location` (`location`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COMMENT='客户门店高德坐标';

示例数据：

sql 复制代码

INSERT INTO `` (`company_name`, `address_detail`, `address_province`, `address_city`, `address_county`, `location`) VALUES ('南昌市龙盛大药房有限公司', '江西省南昌市西湖区建设西路1285号龙盛建设佳园4号楼商用楼104室', '江西省', '南昌市', '西湖区', ST_GeomFromText('POINT(115.877543 28.649779)'));
INSERT INTO `` (`company_name`, `address_detail`, `address_province`, `address_city`, `address_county`, `location`) VALUES ('江西益康大药房有限公司', '江西省南昌市西湖区云锦路436号中海朝阳郡铂宫2号楼1层商业111室（011室）', '江西省', '南昌市', '西湖区', ST_GeomFromText('POINT(115.875458 28.624109)'));

注意location 字段为point 类型，所以我们在新增或者修改数据的时候需要做处理

sql 复制代码

UPDATE set location = POINT(CAST(#{longitude} as DECIMAL(12,6)),CAST(#{latitude} as DECIMAL(12,6))) WHERE company_name = '南昌市龙盛大药房有限公司'

2.api查询对应的sql

下面传入的115.867543 和28.649779 为当前查询人的经纬度，最终的结果distance 就是距离的公里数

sql 复制代码

SELECT
	company_name,
	address_detail,
	address_province,
	address_city,
	address_county,
	location,
	ifnull(
		ROUND(
			ST_DISTANCE_SPHERE ( location, POINT ( CAST( 115.867543 AS DECIMAL ( 12, 6 )), CAST( 28.649779 AS DECIMAL ( 12, 6 ))) )/ 1000,
			2 
		),
		999999999999 
	) AS distance 
FROM
	ums_member_company_coordinate 

order by distance  asc

二、小程序实现

小程序需要获取到当前手机的经纬度，就是上面传入的15.867543 和28.649779，然后调用后台接口后台把结果渲染在页面上。

uniapp地图文档入口

java之uniapp实现门店地图

文章目录

前言

一、后台实现

1. 获取门店的经纬度

2.api查询对应的sql

二 、小程序实现

二、小程序实现