1. First, write a tool class to locate the function in common.js

common.js:

//Location service function entry
function getLocationInfo() {
    if (localStorageUtils.acquireLocationInfo() == null ||localStorageUtils.acquireLocationInfo().curLongitude == null || localStorageUtils.acquireLocationInfo().curLatitude == null) {
        getCurrentLocation();
    } else {
        alert(localStorageUtils.acquireLocationInfo().distance);
        var distance = localStorageUtils.acquireLocationInfo().distance;
        var locationMessage = localStorageUtils.acquireLocationInfo().locationMessage;
        var curLongitude = localStorageUtils.acquireLocationInfo().curLongitude;
        var curLatitude = localStorageUtils.acquireLocationInfo().curLatitude;
        locationInfo = {
            locationMessage: locationMessage,
            currentTime: Date.parse(new Date()),
            distance: distance,
            curLongitude: curLongitude,
            curLatitude: curLatitude
        };
        localStorageUtils.saveLocationInfo(locationInfo);
        showWatchPosition();
    }
}

//Get current location information
function getCurrentLocation() {
    var locationMessage, distance, curLongitude, curLatitude;
    var geolocation = new qq.maps.Geolocation("UAFBZ-P743U-HRWVG-45JMD-VADUH-Q6F7Q", "myapp");
    var options = {timeout: 5000};
    geolocation.getLocation(showPosition, options);

    function showPosition(position) {
        if (position != null) {
            curLongitude = position.lng;
            curLatitude = position.lat;
            locationMessage = "Positioning succeeded!";
            distance = getDistance();
            locationInfo = {
                locationMessage: locationMessage,
                currentTime: Date.parse(new Date()),
                distance: distance,
                curLongitude: curLongitude,
                curLatitude: curLatitude
            };
            console.log("Information during normal positioning:" + locationInfo.toString());
            localStorageUtils.saveLocationInfo(locationInfo);
        }
    }

    //Location failure handling method
    navigator.geolocation.watchPosition(function (position) {
            console.log("i'm tracking you!");
        },
        function (error) {
            if (error.code == error.PERMISSION_DENIED) {
                locationMessage = "User does not allow geolocation";
            }
            if (error.code == error.POSITION_UNAVAILABLE || error.code == error.TIMEOUT) {
                locationMessage = "Locating";
            }
            locationInfo = {
                locationMessage: locationMessage,
                currentTime: Date.parse(new Date()),
                distance: null,
                curLongitude: null,
                curLatitude: null
            };
            console.log(locationInfo);
            localStorageUtils.saveLocationInfo(locationInfo);
        });
}

//Monitor location change
function showWatchPosition() {
    var locationMessage, distance, curLongitude, curLatitude;
    var geolocation = new qq.maps.Geolocation("UAFBZ-P743U-HRWVG-45JMD-VADUH-Q6F7Q", "myapp");
    geolocation.watchPosition(showPosition);

    function showPosition(position) {
        if (position != null) {
            curLongitude = position.lng;
            curLatitude = position.lat;
            locationMessage = "Positioning succeeded!";
            distance = getDistance();
            locationInfo = {
                locationMessage: locationMessage,
                currentTime: Date.parse(new Date()),
                distance: distance,
                curLongitude: curLongitude,
                curLatitude: curLatitude
            };
            console.log("Information after monitoring and positioning:" + locationInfo);
            localStorageUtils.saveLocationInfo(locationInfo);
        }
    }
}

//Calculate distance
function getDistance() {
    function toRad(d) {
        return d * Math.PI / 180;
    }

    //Get the current latitude and longitude
    var curLongitude = localStorageUtils.acquireLocationInfo().curLongitude;
    var curLatitude = localStorageUtils.acquireLocationInfo().curLatitude;
    //alert("current longitude:" + curLongitude + "current latitude:" + curLatitude);
    //Get the longitude and latitude of the store
    var storeLongitude = localStorageUtils.acquireStoreInfoBean().longitude;
    var storeLatitude = localStorageUtils.acquireStoreInfoBean().latitude;
    //alert("store longitude:" + storeLongitude + "store latitude:" + storeLatitude);
    var dis = 0;
    var radLat1 = toRad(curLatitude);
    var radLat2 = toRad(storeLatitude);
    var deltaLat = radLat1 - radLat2;
    var deltaLng = toRad(curLongitude) - toRad(storeLongitude);
    var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
    return dis * 6378137;
}

Call localStorageUtils

localStorageUtils.js:

localStorageUtils.saveLocationInfo = function (locationInfo) {
    localStorageUtils.setValue(localStorageUtils.constantKey.LOCATION_INFO, localStorageUtils.toJSONString(locationInfo));
}
localStorageUtils.acquireLocationInfo = function () {
    var jsonValue = localStorageUtils.getValue(localStorageUtils.constantKey.LOCATION_INFO);
    if (jsonValue) {
        return localStorageUtils.jsonToObject(jsonValue);
    }
}
localStorageUtils.getValue = function(key){
    if(localStorageUtils.checkSupport()){
        return localStorage.getItem("" + key);
    }
}

localStorageUtils.setValue = function(key, value){
    if(localStorageUtils.checkSupport()){
        localStorage.setItem("" + key, value);
    }
}
localStorageUtils.toJSONString = function (value) {
    if (value) {
        if (typeof value == "string") {
            return value;
        } else {
            return JSON.stringify(value);
        }
    }
}
localStorageUtils.jsonToObject = function (value) {
    if (value) {
        if (typeof value == "string") {
            return JSON.parse(value);
        } else {
            return value;
        }
    }
}
localStorageUtils.checkSupport = function() {
    if(window.localStorage){
        return true;
    } else {
        alert("Browser does not support localstorage");
        return false;
    }
}

The corresponding html page needs to import the corresponding js file

html:

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script type="text/javascript" src="/new_style/js/common/common.js"></script>
<script type="text/javascript" th:src="@{/new_style/js/common/localStorageUtils.js}"></script>
getLocationInfo()

Explanation:

According to the example provided by Tencent: http://lbs.qq.com/tool/component-geolocation.html

Combined with the positioning function of H5: http://www.w3school.com.cn/html5/html ﹣ 5 ﹣ geolocation.asp

First get the current location longitude and latitude information, then get the store longitude and latitude information from the database, and calculate the distance between them. ps: the database longitude and latitude obtained this time are obtained by localhostStorage, and then the calculated distance is stored in the location information object locationInfo, and locationInfo is stored in the localstorage. When calling the location information, only getlocati needs to be called Oninfo() function. After the method is executed, the information (including distance) obtained is stored in localstorage, and then the next logical judgment is made according to the required distance.