javascript 通过坐标进行地理定位

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 通过坐标进行地理定位相关的知识,希望对你有一定的参考价值。

getLocation();

function getLocation() {
    if (!readCookie('cityID')) {
        navigator.geolocation.getCurrentPosition(showPosition, function () {});
    } else {
        var cityID = readCookie('cityID');
        $(classCityHeader).val(cityID);
    }
    initSelectBox(classCityHeader);
}

function showPosition(position) {
    var city,
            cityVal;
    var l_range = 0, l_range_prev = 0;
    l_latitude = position.coords.latitude;
    l_longitude = position.coords.longitude;

    $(".contact-phone select option").each(function () {
        var longlat = $(this).data('coord').split(',');
        l_range = Math.sqrt(
                Math.pow((l_latitude - longlat[0]), 2) +
                Math.pow((l_longitude - longlat[1]), 2)
                );
        if (l_range < l_range_prev || l_range_prev == 0) {
            l_near = $(this);
            l_range_prev = l_range;
        }
    })

    var $city = $('[data-coord="' + l_near.data('coord') + '"]'),
            cityID = $city.val(),
            cityNAME = $city.data('value');

    createCookie('cityID', cityID, 1);
    createCookie('cityNAME', cityNAME, 1);
    createCookie('cityPHONE', $city.data('phone'), 1);

    $(classCityHeader).val(cityID);
    
    initSelectBox(classCityHeader);
    updateLocationForm();
    updateStyleSelectBox();
    refreshInitBox();
}
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else
        var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}
function updateLocationForm() {
    var classSelect = 'select.city_form',
            cityID = readCookie('cityID');
    if (cityID && $(classSelect).length) {
        $(classSelect).val(cityID);
        $.each($(classSelect), function (i, v) {
            $selectBox = new SelectBox($(v), {mobile: true, menuSpeed: 'fast'});
            $selectBox.refresh();
        });
    }
}

function updateStyleSelectBox() {
    var cityID = readCookie('cityID');
    if (cityID) {
        var styleSelect = '.selectBox-options',
                styleSelectClass = 'selectBox-selected';

        $(styleSelect + ' li').removeClass(styleSelectClass);
        $(styleSelect + ' [rel="' + cityID + '"]').parents('li').addClass(styleSelectClass);
    }
}

function refreshInitBox() {
    var $cityPhoneMobile = new SelectBox($('[data-size="xs"]'), {mobile: true, menuSpeed: 'fast'}),
            $cityPhoneDesktop = new SelectBox($('[data-size="lg"]'), {mobile: true, menuSpeed: 'fast'});
    $cityPhoneMobile.refresh();
    $cityPhoneDesktop.refresh();
    console.log('refreshInitBox');
}

function updatePhoneByCity(selectBox) {
    var size = selectBox.attr('data-size'), select = '.city_phone[data-size="' + size + '"]',
            phone = $(select + ' option:selected').attr('data-phone');
    container = $(select).closest('.contact-phone').find('.phone-lg-value');
    container.text(phone);
    container.attr('href', 'tel:' + phone.replace(/ |-|\(|\)/g, ''));
}
function initSelectBox(selector) {
    $(selector).selectBox({
        mobile: true
    });
    var $selectBoxCity = $('.select.city_phone:not(.selectBox-dropdown)');
    $.each($selectBoxCity, function () {
        updatePhoneByCity($(this));
    });
}

以上是关于javascript 通过坐标进行地理定位的主要内容,如果未能解决你的问题,请参考以下文章

通过 React-Redux 进行地理定位

HTML / JS 地理定位和比较坐标

Chrome中的地理定位API:位置未定义的坐标属性

地理定位 - 异步回调无法使用错误 - Javascript

在表单发布之前执行地理定位 javascript

状态未在地理定位功能中使用 setState 进行更新