修改

Question

我正在使用Modernizr来帮助检测浏览器上的不同内容。现在，我知道最近的浏览器支持地理定位（caniuse chart here），但如果它被用户首选项关闭了怎么办？在这种情况下，Modernizr通过geolocation标记上的html类返回true，因为它确实有支持。

我一直在使用地理位置支持来制作“获取路线”类型的地图。这是它的要点：

什么有效

地图适用于指向目的地的路线;
在完全没有支持的浏览器中，会显示一个突出显示所需目的地地址（例如餐馆）的地图; 这是作为后备保留的，以防止页面上出现空白。

我被困的地方

我一直在环顾四周，似乎无法找到任何关于如何处理支持地理位置但是已禁用的浏览器（无论是否移动）的文档strong>按用户偏好设置。

我一直在使用

CSS

我正在使用这个here post，它显示了一个有效的解决方案，如果支持地理定位，用户将看到一张地图，其中包含指向正确目的地的路线。在地理位置不支持的情况下，我有一个备用内容div准备显示。

/* geo location is supported */ html.geolocation #regular-map { display: block; } html.geolocation #alternate-map { display: none; } /* geo location is NOT supported, show alternate map */ html.no-geolocation #regular-map { display: none; } html.no-geolocation #alternate-map { display: block; }

我尝试了什么

权限被拒绝错误代码

我尝试使用这种类型的检测来查看用户是否已阻止地理位置（基于this post），但是当我在浏览器上对其进行测试时，我会收到通知“支持“：

if(navigator.geolocation) { alert("supported"); } else { function errorCallback(error) { if (error.code = error.PERMISSION_DENIED) { alert("blocked"); } else { alert("not supported"); } } }

底线

最重要的是，我需要看的是浏览器是否支持地理位置，但用户选择使用地理定位服务拒绝。

修改

一般的想法是这样的。我对PHP比较熟悉，所以这就是我的想法：

<?php if($hasgeosupport) { ?> <script src="hassupport.js"></script> <div id="geolocation"></div> <?php } else if($hasgeosupport) { ?> <script src="fallback.js"></script> <div id="fallback"></div> <?php } ?>

编辑2

今天早上我在这里。我有代码创建正确的HTML结构。但是，地图未加载。

if (navigator.geolocation) { $(document).ready(function() { // Does not create HTML without the above line $.getScript('js/maps.js'); // includes required scripts and variables needed var regular_map = '<div data-role="content"><div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"><div id="map_canvas" style="height:350px;"></div></div><div id="results" style="display:none;"><div id="directions"></div></div></div>'; $("#basic-map").prepend(regular_map); } } else { // fallback here }

我不知道为什么这对我不起作用。我有正确的脚本，生成HTML。

同样适用于后备。我的HTML已生成，但地图从未显示。

Answer 1

这一直对我有用

if(navigator.geolocation) { // it's supported

    navigator.geolocation.watchPosition(function(position) {
         console.log('Geolocation is enabled, and the user approved');
    }, function (error) { 
         if (error.code == error.PERMISSION_DENIED) {
             console.log('The user declined');
         }else{
             console.log('Either turned of, or another error occurred ?');
         }
    });
}

修改

根据编辑过的问题，您可以加载这些脚本并根据地理位置的结果动态插入元素：

if(navigator.geolocation) { // it's supported navigator.geolocation.watchPosition(function(position) { $('body').append( $('<div />', {id : 'geolocation'}) ); $.getScript('hassupport.js', function() { // script loaded }); }, function (error) { if (error.code == error.PERMISSION_DENIED) { console.log('The user declined'); }else{ console.log('Either turned of, or another error occurred ?'); } //either way $('body').append( $('<div />', {id : 'fallback'}) ); $.getScript('fallback.js', function() { // script loaded }); }); }

Answer 2

我找到了一个有效的解决方案。

备注

我仍然想表明方向（例如，在4号路左转等）。

代码

HTML

<div id="basic-map" class="mymap" data-role="page">
    <div id="regularmap" data-role="content"></div>

    <div id="fallback">
        <div id="map" style="width: 100%; height: 350px"></div>
        <div class="infobox-wrapper">
            <div id="infobox">
                <h3>My Business</h3>
                <p>
                    123, Fake Street <br />
                    City (Province) A1B 2C3 <br /> <br />
                    <a href="tel:+15555551234">555 555-1234</a>
                </p>
             </div>
        </div>
    </div>
</div>

CSS

/* Regular ------------------------------------- */
html.geolocation #basic-map {
    margin-top: 20px;
    border: 5px solid #fff;
    min-height: 0 !important;
    border: 1px solid #000;
}
html.geolocation #basic-map #regularmap {
    height: 350px;
}
html.geolocation #basic-map #fallback {
    display: none !important;
    border: 1px solid #000;
}
/* Fallback ------------------------------------ */
html.no-geolocation #regularmap {
    display: none;
}
    html.no-geolocation #basic-map {
        position: relative;
    }
    html.no-geolocation #infobox {
        border:2px solid black;
        margin-top:8px;
        background:#333;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        padding:10px;
        padding:1rem;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        text-shadow:0 -1px #000;
        -webkit-box-shadow:0 0 8px #000;
        box-shadow:0 0 8px #000;
        line-height:120%;
        position:absolute;
        top: 25px;
        left: 32px;
        padding-right: 20px;
    }
    html.no-geolocation #infobox:after {
        content: "";
        width: 147px;
        height: 8px;
        position: absolute;
        bottom: -9px;
        right: 35px;
        background: url(../img/tipbox.gif) top right no-repeat;
    }
    html.no-geolocation #infobox a {
        color:#fff !important;
        font-size:14px
    }
    html.no-geolocation #infobox a:hover {
        color:#e2e2e2 !important
    }
    html.no-geolocation #infobox h3 {
        color:#fff !important;
        font-weight:bold;
        margin-top:0
    }
    html.no-geolocation #infobox #infoBox img {
        position:absolute;
        top:15px;
        right:5px;
        z-index:5
    }

的JavaScript

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function()
{
if(navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(function(position)
    {  
        var gps = (position.coords.latitude+position.coords.longitude);  
        window.GlobalVar = gps;

        window.myLatt = position.coords.latitude;
        window.myLong = position.coords.longitude;

        initialize();
    });

    var Center=new google.maps.LatLng(46.327256,-72.560813);
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize()
    {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var properties =
        {
            center:Center,
            zoom:16,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        map=new google.maps.Map(document.getElementById("regularmap"), properties);
        directionsDisplay.setMap(map);

        var marker=new google.maps.Marker(
        {
            position:Center
        });

        marker.setMap(map);
        Route();
    }

    function Route()
    {
        startLat  =     window.myLatt;
        startLong =  window.myLong;

        var start = new google.maps.LatLng(startLat, startLong);
        var end =new google.maps.LatLng(46.327254,-72.560813);
        var request =
        {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status)
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                directionsDisplay.setDirections(result);
            }
        });
    }

    google.maps.event.addDomListener(window,'load',initialize);
} // if(navigator.geolocation)
else
{
    $.getScript('http://maps.google.com/maps/api/js?sensor=true');
    $.getScript('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js');
    function initialize()
    {
        /* ----- Variables ---------------------------------- */
        var myLat = 46.327269;
        var myLong = -72.560779;
        var iconURL = 'img/logo-map-marker-large.png';
        var myClose = "http://www.google.com/intl/en_us/mapfiles/close.gif";
        var bbl_bg = "url('img/tipbox.gif') no-repeat";
        /* ----- Scripted ----------------------------------- */
        var loc,map,marker,infobox;loc=new google.maps.LatLng(myLat,myLong);map=new google.maps.Map(document.getElementById("map"),{zoom:15,center:loc,mapTypeId:google.maps.MapTypeId.ROADMAP});marker=new google.maps.Marker({map:map,position:loc,icon:iconURL,visible:true});infobox=new InfoBox({content:document.getElementById("infobox"),disableAutoPan:false,maxWidth:150,pixelOffset:new google.maps.Size(-140,0),zIndex:null,boxStyle:{background:bbl_bg,opacity:0.75,width:"320px"},closeBoxMargin:"2px 2px 2px 2px",closeBoxURL:myClose,infoBoxClearance:new google.maps.Size(1,1)});google.maps.event.addListener(marker,"click",function(){infobox.open(map,this);map.panTo(loc)});
    }
    google.maps.event.addDomListener(window, 'load', initialize);
} // else
}); // $(document).ready(function()
</script>

图片

toolbox.gif

Tipbox

logo-map-marker-large.png（虽然也创建了较小的版本，但在此示例中未使用）

"We Are Here" icon

地理定位可能，但不活跃

什么有效

我被困的地方

我一直在使用

CSS

我尝试了什么

权限被拒绝错误代码

底线

修改

编辑2

2 个答案:

备注

代码

HTML

CSS

的JavaScript

图片