如何在不点击控制按钮的情况下定位用户？（地图框 API、JavaScript）

Posted 2023-02-23

技术标签:

【中文标题】如何在不点击控制按钮的情况下定位用户？（地图框 API、JavaScript）【英文标题】：How to locate a user without clicking on the control button? (MapBox API, JavaScript) 【发布时间】：2019-05-23 10:19:55 【问题描述】：

我正在尝试在网站完全加载时定位用户。我正在使用最新的 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
));

【问题讨论】：

【参考方案1】：

试试这个

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
  );
);

【讨论】：

我得到：“未捕获的类型错误：无法读取未定义的属性 'addSource'” 现在试试，我修好了现在我收到“未捕获的错误：样式未完成加载”。（通过添加“this.map.on('load', () => );”来修复它。是否可以使圆圈变大并使用另一种颜色？【参考方案2】：

是的，您必须使用 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
);

见https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol-instance-members

【讨论】：

【参考方案3】：

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

<!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>

【讨论】：

以上是关于如何在不点击控制按钮的情况下定位用户？（地图框 API、JavaScript）的主要内容，如果未能解决你的问题，请参考以下文章

iOS - 如何在不调整大小和重新定位按钮视图的情况下更改按钮图像

如何在不点击标记的情况下在 iOS 谷歌地图中显示信息窗口？

如何在不更改用户设置的缩放比例的情况下更新地图标记？

Android怎么实现点击按钮获取当前位置的信息，没有地图的情况下。

MKUserTrackingButton - 如何在不缩小的情况下获取用户位置的中心地图？

是否可以在不启动核心定位的情况下向用户询问当前位置

如何在不点击控制按钮的情况下定位用户？ （地图框 API、JavaScript）

如何在不点击控制按钮的情况下定位用户？（地图框 API、JavaScript）