java集成腾讯地图并获取用户附近商家

前言:

最近公司想集成地图然后实现一些定位功能

解决思路:

一、集成腾讯地图(小程序中干脆就用他自己的产品)

二、获取用户授权定位

三、利用经纬度计算距离推算出附近商家

具体做法：

一、后台集成腾讯地图

1、注册腾讯地图(此部分详细略过)

2、集成

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你自己的key(腾讯地图自己找)"></script>

二、商家位置录入

<title>地址解析</title>
<style type="text/css">*{margin:0px;padding:0px;}body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}p{width:603px;padding-top:3px;margin-top:10px;overflow:hidden;}input#address{width:300px;}#container {min-width:603px;min-height:767px;}.upload-list {display: inline-block;width: 60px;height: 60px;text-align: center;line-height: 60px;border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, .2);margin-right: 4px;}.upload-list img {width: 100%;height: 100%;}.upload-list-cover {display: none;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, .6);}.upload-list:hover .upload-list-cover {display: block;}.upload-list-cover i {color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=2KKBZ-22WWW-Z2MRK-O5V4C-OF5XF-NDBSD"></script>
<script>var geocoder,map,marker = null;var init = function() {var center = new qq.maps.LatLng(22.541058774959126,114.06546592712402);map = new qq.maps.Map(document.getElementById('container'),{center: center,zoom: 15});//调用地址解析类var info = new qq.maps.InfoWindow({map: map});geocoder = new qq.maps.Geocoder({complete : function(result){map.setCenter(result.detail.location);var marker = new qq.maps.Marker({map:map,position: result.detail.location});//添加监听事件 当标记被点击了  设置图层qq.maps.event.addListener(marker, 'click', function(event) {info.open();info.setContent('<div style="width:280px;height:100px;">'+result.detail.address+event.latLng.getLat()+event.latLng.getLng()+'</div>');info.setPosition(result.detail.location);vm.getCoordinate(event);vm.getMapLocation(result.detail.address);});qq.maps.event.addListener(map, 'click', function(event) {vm.getCoordinate(event);vm.getMapLocation(result.detail.address);var names=codeLatLng(event.latLng.getLat(),event.latLng.getLng());/*   alert("该处坐标为"+event.latLng.getLat()+event.latLng.getLng()+names)*/});}});}function codeLatLng(lat,lng) {//获取经纬度数值   按照,分割字符串 取出前两位 解析成浮点数var latLng = new qq.maps.LatLng(lat, lng);//调用信息窗口var info = new qq.maps.InfoWindow({map: map});//调用获取位置方法var names= geocoder.getAddress(latLng);return names;}function codeAddress() {var address = document.getElementById("address").value;//通过getLocation();方法获取位置信息值geocoder.getLocation(address);}
</script>

<i-col span="20" :xs="16" :sm="12" :md="18" :lg="7"><a @click="getMap" v-show="edit" style="color: red">获取公司详细坐标</a>

<Form-item label="所在位置经纬度：">{{lat}},{{lng}}{{mapAdress}}
</Form-item>

该处为vue代码

let vm = new Vue({

data: {

isMap:false

}

getMap:function(){vm.isMap=true;// 开始弹出窗口var index = layer.open({type: 1,content: $('#tengXunMap'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响area: ['100%', '100%'],});
},

)}

三、小程序端调起用户授权地理位置以获取用户坐标

四、利用经纬度推算出用户附近500KM包含的商家

private static final double EARTH_RADIUS = 6378137;//赤道半径private static double rad(double d) {return d * Math.PI / 180.0;
}

public static Double mul(Double v1, Double v2) {BigDecimal b1 = new BigDecimal(v1.toString());BigDecimal b2 = new BigDecimal(v2.toString());return new Double(b1.multiply(b2).doubleValue());
}
public double getDistance(double lon1, double lat1, double lon2, double lat2) {double radLat1 = rad(lat1);double radLat2 = rad(lat2);double a = radLat1 - radLat2;double b = rad(lon1) - rad(lon2);double s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));s = s * EARTH_RADIUS;return s;//单位米
}

/*** 返回附近商家信息无排序按单量排序* @param lat 纬度* @param lng 经度* @return*/
@IgnoreAuth
@RequestMapping("/listByOrder")
public R getCompanyByOrder(@RequestParam(required = false, defaultValue = "0") double lat, @RequestParam(required = false, defaultValue = "0") double lng) {List<TGradeUserCompanyEntity> tGradeUserCompanyEntities =tGradeUserCompanyService.selectByUserAddress();List<TGradeUserCompanyEntity> entities = new ArrayList<>();if (tGradeUserCompanyEntities.size() > 5) {//判断list长度entities = tGradeUserCompanyEntities.subList(0, 4);//取前四条数据}//无参数则推荐默认列表if (lat <= 0) {if (tGradeUserCompanyEntities.size() > 5) {//判断list长度return R.ok(entities);}else {return R.ok(tGradeUserCompanyEntities);}}//推荐的距离范围String search = sysConfigService.getValue("SEARCHNEAR", "500");double distances = mul(Double.valueOf(search), Double.valueOf("1000"));BigDecimal data1 = new BigDecimal(distances);//查找该区域上一级区域所在地区所有培训机构List<TGradeUserCompanyEntity> companyEntities = new ArrayList<>();if (tGradeUserCompanyEntities.size() > 0) {Iterator<TGradeUserCompanyEntity> iterator = tGradeUserCompanyEntities.iterator();try {while (iterator.hasNext()) {TGradeUserCompanyEntity companyEntity = iterator.next();companyEntity.setDistance(getDistance(lng, lat, companyEntity.getLng(), companyEntity.getLat()));BigDecimal data2 = new BigDecimal(companyEntity.getDistance());if (data2.compareTo(data1) < 0) {companyEntities.add(companyEntity);}}} catch (Exception e) {e.printStackTrace();}}if (companyEntities.size() > 0) {return R.ok(companyEntities);} else {if (tGradeUserCompanyEntities.size() > 5) {//判断list长度return R.ok(entities);}else {return R.ok(tGradeUserCompanyEntities);}}
}

转载请注明出处，掌声送给社会人

java集成腾讯地图并获取用户附近商家相关推荐

java集成腾讯地图
1.首先在pom.xml里引入,如果不做附近搜索,可以不引这个 2.后台代码: package com.xxx.common.utils; import ch.hsr.geohash.GeoHash; ...
java使用腾讯地图根据位置获取经纬度信息
java使用腾讯地图根据位置获取经纬度信息. 直接上代码,这里需要你去腾讯地图注册账号获取一个key值: /***** @author Abell* @descibe 根据位置获取经纬度信息* @da ...
Java集成腾讯云音视频录制功能
Java集成腾讯云音视频录制功能为什么要实现音视频录制功能因为我们做的是一个医院的项目,医生和患者可能进行视频通话和语音通话,为了保证通话的质量以及后续的问题, 我们就需要进行音视频录制,以便后续 ...
vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...
H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
腾讯地图调用获取经度纬度代码
腾讯地图调用获取经度纬度代码 //腾讯地图拼接好的数据返回经度和纬度 function getPositionInfo($address) { header("Content-type:te ...
第八篇：微信公众平台开发实战Java版之如何网页授权获取用户基本信息
第一部分:微信授权获取基本信息的介绍我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息一.开通腾讯位置服务二.编码实现 (一)获取定位坐标 (二).在项目中使用一.开通腾讯位置服务在这里我们先要登录腾讯我i之服务的官网 ...

java集成腾讯地图并获取用户附近商家

java集成腾讯地图并获取用户附近商家相关推荐

最新文章

热门文章