[JavaScript知识库]springboot8==调用百度地图API从浏览器获取经纬度，后端使用geodesy依赖计算配送距离

见百度地图API调用文档

jspopularGL | 百度地图API SDK

?

?================

<!--引入百度地图API用于从浏览器获取当前经纬度-->
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=CoeKSNi3O0VoiopZZTwGA3HFT9AjcWGX"></script>

===============

<span><img src="./images/time.png"/> 距离{{userLocation}}km</span>
<span><img src="./images/money.png"/> 配送费{{sendMoney}}元</span>
<span><img src="./images/location.png"/> 预计时长{{sendTime}}min</span>

=========

//默认值
userLocation: 1,
sendMoney: 1,
sendTime: 1,

=======

getLocation() {
    let _this = this
    var map = new BMap.Map("allmap");
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(async function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置，是否允许使用：' + r.point.lng + ',' + r.point.lat);

            const location = {
                //往后端传输经纬度
                latitude: r.point.lng,
                longitude: r.point.lat
            }
            const res = await getLocation2(location)
            // alert(res.code)
            if (res.code === 1) {
                _this.userLocation = res.data
                _this.sendMoney = _this.userLocation * 1
                _this.sendTime = _this.userLocation * 2
                console.log(_this.userLocation + '千米')
            }
        } else {
            alert('failed' + this.getStatus());
        }
    });
},

===========

//获取当前距离
function getLocation2(location) {
    return $axios({
        'url': '/dish/getLocation2',
        'method': 'get',
        params: location
    })
}

==========

/**
 * 根据前端传回的经纬度，计算获取距离
 */
@GetMapping("/getLocation2")
public R getLocation(String latitude, String longitude) {
    log.info("经纬度" + latitude + "经纬度" + longitude);
    double a = Double.parseDouble(latitude);
    //用户当前坐标
    GlobalCoordinates userSource = new GlobalCoordinates(Double.parseDouble(latitude), Double.parseDouble(longitude));
    //店铺位置坐标   经纬度104.07274727经纬度30.57899372
    GlobalCoordinates businessTarget = new GlobalCoordinates(104.07274728, 30.57899372);
    double meterDouble = getDistanceMeter(userSource, businessTarget, Ellipsoid.Sphere);
    int meter = (int) meterDouble;
    log.info("距离多少千米" + meter / 1000);
    return R.success(meter / 1000);
}

===========================================

。。