Mapbox获取当前位置_Mapbox - Fatal编程技术网

Mapbox获取当前位置

mapbox

Mapbox获取当前位置,mapbox,Mapbox,我正在尝试从Mapbox获取当前位置。这是我在他们的Mapbox网站上找到的一个示例，当我单击Find Me时，它可以正常工作。但是，当我在服务器上复制代码时，它似乎不起作用。当我在服务器上单击“使用此代码查找我”时，我发现此错误位置找不到。。多谢各位 https://www.mapbox.com/mapbox.js/example/v1.0.0/geolocation/ <!DOCTYPE html> <html> <head> <meta cha

我正在尝试从Mapbox获取当前位置。这是我在他们的Mapbox网站上找到的一个示例，当我单击Find Me时，它可以正常工作。但是，当我在服务器上复制代码时，它似乎不起作用。当我在服务器上单击“使用此代码查找我”时，我发现此错误位置找不到。。多谢各位

 https://www.mapbox.com/mapbox.js/example/v1.0.0/geolocation/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.ui-button {
  background:#3887BE;
  color:#FFF;
  display:block;
  position:absolute;
  top:50%;left:50%;
  width:160px;
  margin:-20px 0 0 -80px;
  z-index:100;
  text-align:center;
  padding:10px;
  border:1px solid rgba(0,0,0,0.4);
  border-radius:3px;
  }
  .ui-button:hover {
    background:#3074a4;
    color:#fff;
    }
</style>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidGltbGlzdGVuIiwiYSI6ImNqaWs5eWltbTAybG8za21zNjVuZjg5MW4ifQ.xCKtim61H1YXAkU5KT9-FQ';
var geolocate = document.getElementById('geolocate');
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
    geolocate.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        map.locate();
    };
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [e.latlng.lng, e.latlng.lat]
        },
        properties: {
            'title': 'Here I am!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star'
        }
    });

    // And hide the geolocation button
    geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>

代码对我来说很好用

当我在我的服务器上点击FindMewith这个代码时，我得到了这个找不到错误位置

这可能是因为您不使用https和不支持在不安全来源（如Chrome）上进行地理定位的浏览器，或者您阻止了gelocation

编辑：

为了回答您在评论中提出的问题，以下是经过调整的代码，用于在页面加载中查找位置，而不是单击“查找我”按钮：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidGltbGlzdGVuIiwiYSI6ImNqaWs5eWltbTAybG8za21zNjVuZjg5MW4ifQ.xCKtim61H1YXAkU5KT9-FQ';
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
      map.locate();
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [e.latlng.lng, e.latlng.lat]
        },
        properties: {
            'title': 'Here I am!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star'
        }
    });

    // And hide the geolocation button
    geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>

谢谢，现在轮到我封锁了我的网站。您知道如何更改代码以便页面在页面加载时找到我的位置，而不是单击“查找我”按钮吗？谢谢。是的，我已经用修改过的代码更新了答案。