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

最新推荐文章于 2024-09-08 18:50:42 发布

阿珍爱上了阿强？

最新推荐文章于 2024-09-08 18:50:42 发布

阅读量1.1w

点赞数

分类专栏：一些解决问题的实际办法文章标签： java

本文链接：https://blog.csdn.net/SCDN_CP/article/details/104996686

版权

一些解决问题的实际办法专栏收录该内容

14 篇文章

订阅专栏

前言:

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

解决思路:

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

二、获取用户授权定位

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

具体做法：

一、后台集成腾讯地图

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);
        }
    }
}

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