Javascript 更改标题图像的地理位置检测器脚本

我已经制作了一个相当大的脚本，它将使用浏览器地理定位功能检测用户所在的地理区域，然后更改背景图像并在标题上淡入淡出

现在是一系列条件if/elseif语句。工作得很好，但只是代码开始看起来相当大了

<script type = "text/javascript" >

var geoHeader = document.getElementById("geozones");


function locate() {
    if (navigator.geolocation) {
        console.log('getting geolocation information...');
        navigator.geolocation.getCurrentPosition(function (position) {

            // Determine if in brisbane
            if (position.coords.latitude >= -27.936539 && position.coords.latitude <= -26.772950 && position.coords.longitude >= 152.439692 && position.coords.longitude <= 153.543818) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0004/315409/gelocation-selection-Enlisting-depot-in-Brisbane-during-World-War-I.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Brisbane');

                //Determine if in Barcaldine
            } else if (position.coords.latitude >= -23.741146 && position.coords.latitude <= -23.450440 && position.coords.longitude >= 145.117460 && position.coords.longitude <= 145.484472) {
                geoHeader.style.backgroundImage = 'url(http://i1167.photobucket.com/albums/q640/coolwebs/barcaldine-pub_zpsf8oazwr8.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Barcaldine');

                //Determine if in Beerburrum boundaries 
            } else if (position.coords.latitude >= -26.998834 && position.coords.latitude <= -26.892941 && position.coords.longitude >= 143.313919 && position.coords.longitude <= 153.01622) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0016/315421/gelocation-selection-View-of-Beerburrum-showing-the-hospital-building-on-the-hill-and-houses-in-the-street-ca-1921.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Beerburrum');

                //Determine if in Biggenden boundaries
            } else if (position.coords.latitude >= -25.743886 && position.coords.latitude <= -25.173518 && position.coords.longitude >= 151.750732 && position.coords.longitude <= 152.365966) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0017/315422/gelocation-selection-Woman-seated-in-a-Red-Cross-ambulance-Biggenden-19141918.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Biggenden');

                //Find out Charleville boundaries
            } else if (position.coords.latitude >= -26.735435 && position.coords.latitude <= -25.982371 && position.coords.longitude >= 145.503569 && position.coords.longitude <= 146.679106) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0004/315418/gelocation-selection-Red-Cross-workers-Charleville-1914.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                console.log('You might be in Barcaldine');

                //Determine if in Chinchilla boundaries
            } else if (position.coords.latitude >= -27.016575 && position.coords.latitude <= -26.504023 && position.coords.longitude >= 150.383621 && position.coords.longitude <= 150.913711) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0005/315419/gelocation-selection-Returned-soldiers-in-uniform-surrounding-the-Digger-War-Memorial-in-Chinchilla-ca.-1920.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Chinchilla');

                //Determine if in Cairns boundaries
            } else if (position.coords.latitude >= -17.216314 && position.coords.latitude <= -16.619826 && position.coords.longitude >= 145.477123 && position.coords.longitude <= 146.013393) {
                geoHeader.style.backgroundImage = 'url(http://i1167.photobucket.com/albums/q640/coolwebs/forms%20radio%20images/rex-lookout_zpsgnn4j1xx.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                console.log('You might be in Cairns');

                //Determine if in Lockyer Valley (Gatton and Helidon) boundaries
            } else if (position.coords.latitude >= -27.774956 && position.coords.latitude <= 27.422018 && position.coords.longitude >= 152.03981 && position.coords.longitude <= 152.495742) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0014/315410/gelocation-selection-Gatton-Mens-Auzzillary.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Lockyer Valley');

                //Determine if in Rockhampton
            } else if (position.coords.latitude >= -23.86413 && position.coords.latitude <= -22.348442 && position.coords.longitude >= 149.443603 && position.coords.longitude <= 150.783935) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0018/315414/gelocation-selection-March-to-Freedom-Column-at-Rockhampton-Queensland.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Rockhampton');

                //Determine if in Sunshine Coast (Buderim and Maleny) boundaries
            } else if (position.coords.latitude >= -26.862318 && position.coords.latitude <= -26.312145 && position.coords.longitude >= 152.807479 && position.coords.longitude <= 153.172775) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0020/315416/gelocation-selection-Parade-in-Maleny-ca.-1915.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Sunshine Coast');

                //Determine if in Thargomindah boundaries
            } else if (position.coords.latitude >= -28.378369 && position.coords.latitude <= -27.529237 && position.coords.longitude >= 143.313919 && position.coords.longitude <= 144.478469) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0015/315420/gelocation-selection-Selling-flowers-to-raise-funds-for-the-Red-Cross-Thargomindah-ca.-1916.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Thargomindah');

                //Determine if in Toogoolawah (in the Brisbane Valley) boundaries
            } else if (position.coords.latitude >= -27.402512 && position.coords.latitude <= -26.91376 && position.coords.longitude >= 152.210098 && position.coords.longitude <= 152.715469) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0003/315417/gelocation-selection-Peace-celebrations-in-Toogoolawah-1918.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Toogoolawah');

                //Determine if in Townsville boundaries
            } else if (position.coords.latitude >= -20.116181 && position.coords.latitude <= -18.363276 && position.coords.longitude >= 144.093261 && position.coords.longitude <= 147.619873) {
                geoHeader.style.backgroundImage = 'url(http://testing.slq.qld.gov.au/__data/assets/image/0019/315415/gelocation-selection-Members-of-the-Mens-Auxiliary-at-Townsville-Queensland.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('You might be in Townsville');

            } else {
                geoHeader.style.backgroundImage = 'url(http://i415.photobucket.com/albums/pp236/Keefers_/Keffers%20Animals/evilmonkey.jpg)';
                geoHeader.className = geoHeader.className + " fadeHeader";
                geoHeader.style.opacity = '1';
                console.log('We dunno where you are... evil monkey is watching you');
            }
        }, function () {
            geoHeader.style.opacity = '1';
            geoHeader.style.backgroundImage = 'url(http://i636.photobucket.com/albums/uu82/fireduptiger/Enchanted%20Forest/untitled.jpg)';
            geoHeader.className = geoHeader.className + " fadeHeader";
            geoHeader.style.opacity = '1';
            console.log('Too bad you are denying us your location. We are lost in the woods...');
        });
    } else {
        console.log('error message. Geolocation failed. Probably lacking browser support' + error.code);
    }
};

locate();

</script>

var geoHeader=document.getElementById（“geozones”）；
函数locate（）{
if（导航器.地理位置）{
log（'正在获取地理位置信息…'）；
navigator.geolocation.getCurrentPosition（函数（位置）{
//确定是否在布里斯班
如果（position.coords.latitude>=-27.936539&&position.coords.latitude=152.439692&&position.coords.经度=-23.741146&&position.coords.latitude=145.117460&&position.coords.latitude=-26.998834&&position.coords.latitude=143.313919&&position.coords.latitude=-25.743886&&position.coords.latitude=151.750732&&position.coords。经度=-26.735435&&position.coords.latitude=145.503569&&position.coords.latitude=-27.016575&&position.coords.latitude=150.383621&&position.coords.latitude=-17.216314&&position.coords.latitude=145.477123&&position.coords.latitude=-27.774956&&position.coords.latitude=152.03981&&position.coords.coords.经度=-23.86413&&position.coords.latitude=149.443603&&position.coords.latitude=-26.862318&&position.coords.latitude=152.807479&&position.coords.latitude=-28.378369&&position.coords.latitude=143.313919&&position.coords.latitude=-27.402512&&position.coords.latitude=152.210098&&position.coords.latitude=-20.116181&&positionoords.latitude=144.093261&&position.coords.longitude您可以将所有标题存储在对象中，包括：


有坐标限制的区域
默认-如果位置已知，但不属于任何区域
禁用-如果位置未知，则禁用

大概是这样的：

var headers = {
    regional : [
        {
            desc : "Brisbane",
            minLat : -27.936539,
            maxLat : -26.772950,
            minLong : 152.439692,
            maxLong : 153.543818,
            image : 'http://testing.slq.qld.gov.au/__data/assets/image/0004/315409/gelocation-selection-Enlisting-depot-in-Brisbane-during-World-War-I.jpg'
        }, {
            desc : "Barcaldine",
            minLat : -23.741146,
            maxLat : -23.450440,
            minLong : 145.117460,
            maxLong : 145.484472,
            image : 'http://i1167.photobucket.com/albums/q640/coolwebs/barcaldine-pub_zpsf8oazwr8.jpg'
        }
    ],
    def : 'http://testing.slq.qld.gov.au/__data/assets/image/0004/315409/gelocation-selection-Enlisting-depot-in-Brisbane-during-World-War-I.jpg',
    disabled : 'http://i636.photobucket.com/albums/uu82/fireduptiger/Enchanted%20Forest/untitled.jpg'
};

并编写一个函数，该函数将遍历数组以查找特定区域，如果未找到，则返回默认区域：

function getHeaderForCoordinates(lat, lng) {
    for (var i = 0; i < headers.regional.length; i++)
    {
        var header = headers.regional[i];

        if (lat >= header.minLat && lat <= header.maxLat 
         && lng >= header.minLong && lng <= header.maxLong) 
        {
            console.log("User is from " + header.desc);
            return header.image;
        }
    }

    console.log("User has geolocation, but region is unknown");
    return headers.def;
}

太棒了！这个问题似乎用对象列表数据解决了。只是不确定“def”是什么？@RyanCoolwebs
def
只是一个指向图像的url，如果位置已知，但在
regional
中找不到。我想将其命名为
default
，但它是一个保留的JavaScript单词。您可以随意调用它，例如notFound

。好的，我现在明白你的意思了。如果允许并检测到地理位置，则会显示默认选项，但它不在指定的范围内。我现在将尝试实现代码。只是“getHeaderImage”有问题，因为它没有在任何地方定义。@RyanCoolwebs哦，我刚刚命名了我的函数“getHeaderImage”在一个位置，而“getHeaderForCoordinates”在另一个位置。检查更新。

function wrapWithUrl(url) { // just an utility function
    return "url('" + url + "')";
}

navigator.geolocation.getCurrentPosition(function (position) {
    var url = getHeaderForCoordinates(position.coords.latitude, position.coords.longitude);
    getHeader.style.backgroundImage = wrapWithUrl(url);
}, function () {
    geoHeader.style.backgroundImage = wrapWithUrl(headers.disabled);
});