如何在不点击控制按钮的情况下定位用户？（MapBox API，JavaScript）_Javascript_Geolocation_Gps_Mapbox_Locate

如何在不点击控制按钮的情况下定位用户？（MapBox API，JavaScript）

javascript geolocation gps mapbox

如何在不点击控制按钮的情况下定位用户？（MapBox API，JavaScript）,javascript,geolocation,gps,mapbox,locate,Javascript,Geolocation,Gps,Mapbox,Locate,我试图在网站完全加载时找到用户。我正在使用最新的MapBox API（JavaScript）不需要用户点击地图右上角的按钮就可以做到这一点吗 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [0,0], zoom: 15 // starting zoom }); // Add geolocate control

我试图在网站完全加载时找到用户。我正在使用最新的MapBox API（JavaScript）

不需要用户点击地图右上角的按钮就可以做到这一点吗

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [0,0],
    zoom: 15 // starting zoom
});
// Add geolocate control to the map.
map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
       enableHighAccuracy: true
    },
    trackUserLocation: true
}));

试试这个

navigator.geolocation.getCurrentPosition(position => {
  const userCoordinates = [position.coords.longitude, position.coords.latitude];
  map.addSource("user-coordinates", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: userCoordinates
      }
    }
  });
  map.addLayer({
    id: "user-coordinates",
    source: "user-coordinates",
    type: "circle"
  });
  map.flyTo({
    center: userCoordinates,
    zoom: 14
  });
});

试试这个

navigator.geolocation.getCurrentPosition(position => {
  const userCoordinates = [position.coords.longitude, position.coords.latitude];
  map.addSource("user-coordinates", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: userCoordinates
      }
    }
  });
  map.addLayer({
    id: "user-coordinates",
    source: "user-coordinates",
    type: "circle"
  });
  map.flyTo({
    center: userCoordinates,
    zoom: 14
  });
});

试试这个例子，对我来说很有用

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js'></script>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    <script  >
    var get_location = function() {
    var geolocation = null;
    var c_pos = null;

    if (window.navigator && window.navigator.geolocation) {
        geolocation = window.navigator.geolocation;

        var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000, // 10 seconds
            maximumAge: 30 * 1000 // 30 seconds
        };

        function success(position) {
            console.log(position);
            c_pos = position.coords;
            mapboxgl.accessToken = 'token';  /////////////////  put your token here 
            if (!mapboxgl.supported()) {
                alert('Your browser does not support Mapbox GL');
            } else {
                var map = new mapboxgl.Map({
                    container: 'map', // container id
                    style: 'mapbox://styles/mapbox/streets-v11',  
                    center: [c_pos.longitude, c_pos.latitude], 
                    zoom: 12 // starting zoom
                });
            }
        }

        function error(positionError) {
            console.log(positionError.message);
        }

        if (geolocation) {
            geolocation.getCurrentPosition(success, error, positionOptions);
        }

    } else {
        alert("Getting Geolocation is prevented on your browser");
    }

    return c_pos;
}
    </script>
</head>
<body>

<div id='map'></div>
<script>
    var current_pos = get_location();
</script>

</body>
</html>


正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
var get_location=函数（）{
var geolocation=null；
var c_pos=null；
if（window.navigator&&window.navigator.geolocation）{
地理位置=window.navigator.geology；
变量位置选项={
EnableHighAccurance:正确，
超时：10*1000，//10秒
最大值：30*1000//30秒
};
功能成功（职位）{
控制台日志（位置）；
c_pos=位置坐标；
mapboxgl.accessToken='token'；//将您的令牌放在这里
如果（！mapboxgl.supported（））{
警报（“您的浏览器不支持Mapbox GL”）；
}否则{
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v11',  
中心：[经度，纬度]，
缩放：12//开始缩放
});
}
}
功能错误（位置错误）{
控制台日志（位置错误消息）；
}
if（地理定位）{
getCurrentPosition（成功、错误、位置选项）；
}
}否则{
警报（“禁止在浏览器上获取地理位置”）；
}
返回c_位置；
}
var current_pos=获取位置（）；

试试这个例子，它对我有用

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js'></script>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    <script  >
    var get_location = function() {
    var geolocation = null;
    var c_pos = null;

    if (window.navigator && window.navigator.geolocation) {
        geolocation = window.navigator.geolocation;

        var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000, // 10 seconds
            maximumAge: 30 * 1000 // 30 seconds
        };

        function success(position) {
            console.log(position);
            c_pos = position.coords;
            mapboxgl.accessToken = 'token';  /////////////////  put your token here 
            if (!mapboxgl.supported()) {
                alert('Your browser does not support Mapbox GL');
            } else {
                var map = new mapboxgl.Map({
                    container: 'map', // container id
                    style: 'mapbox://styles/mapbox/streets-v11',  
                    center: [c_pos.longitude, c_pos.latitude], 
                    zoom: 12 // starting zoom
                });
            }
        }

        function error(positionError) {
            console.log(positionError.message);
        }

        if (geolocation) {
            geolocation.getCurrentPosition(success, error, positionOptions);
        }

    } else {
        alert("Getting Geolocation is prevented on your browser");
    }

    return c_pos;
}
    </script>
</head>
<body>

<div id='map'></div>
<script>
    var current_pos = get_location();
</script>

</body>
</html>


正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
var get_location=函数（）{
var geolocation=null；
var c_pos=null；
if（window.navigator&&window.navigator.geolocation）{
地理位置=window.navigator.geology；
变量位置选项={
EnableHighAccurance:正确，
超时：10*1000，//10秒
最大值：30*1000//30秒
};
功能成功（职位）{
控制台日志（位置）；
c_pos=位置坐标；
mapboxgl.accessToken='token'；//将您的令牌放在这里
如果（！mapboxgl.supported（））{
警报（“您的浏览器不支持Mapbox GL”）；
}否则{
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v11',  
中心：[经度，纬度]，
缩放：12//开始缩放
});
}
}
功能错误（位置错误）{
控制台日志（位置错误消息）；
}
if（地理定位）{
getCurrentPosition（成功、错误、位置选项）；
}
}否则{
警报（“禁止在浏览器上获取地理位置”）；
}
返回c_位置；
}
var current_pos=获取位置（）；

是的，您必须使用触发器（）以编程方式激活跟踪

// Initialize the geolocate control.
var geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

// Add the control to the map.
map.addControl(geolocate);
map.on('load', function() {
  geolocate.trigger(); //<- Automatically activates geolocation
});

//初始化地理定位控件。
var geologite=new mapboxgl.geologicatecontrol({
位置选项：{
EnableHighAccurance:正确
},
trackUserLocation:true
});
//将控件添加到映射中。
地图添加控制（地理定位）；
map.on（'load'，function（））{
geologite.trigger（）；//是的，您必须使用trigger（）以编程方式激活跟踪
// Initialize the geolocate control.
var geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

// Add the control to the map.
map.addControl(geolocate);
map.on('load', function() {
  geolocate.trigger(); //<- Automatically activates geolocation
});

//初始化地理定位控件。
var geologite=new mapboxgl.geologicatecontrol({
位置选项：{
EnableHighAccurance:正确
},
trackUserLocation:true
});
//将控件添加到映射中。
地图添加控制（地理定位）；
map.on（'load'，function（））{
geologite.trigger（）；//我得到：“Uncaught TypeError:无法读取未定义的”try now，I fix it“的属性'addSource.”现在我得到“Uncaught Error:样式未加载完毕”。（通过添加“this.map.on（'load'，（）=>{}）；”来修复它。是否可以使圆变大并使用另一种颜色？我得到：“Uncaught TypeError:无法读取未定义的”try now，i fix it now i'm getting“Uncaught Error:Style not done loading.”（通过添加“this.map.on（'load'，（）=>{}）；”来修复它。是否可以将圆变大并使用另一种颜色？