Как найти пользователя, не нажимая на кнопку управления?(MapBox API, JavaScript) - PullRequest
Новая
       43

Как найти пользователя, не нажимая на кнопку управления?(MapBox API, JavaScript)

0 голосов
/ 23 мая 2019

Я пытаюсь найти пользователя, когда сайт полностью загружен.Я использую новейший API MapBox (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
}));

Ответы [ 2 ]

0 голосов
/ 23 мая 2019

попробуйте на этом примере, это работает для меня 

<!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>
0 голосов
/ 23 мая 2019

попробуйте с этим 

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
  });
  this.setState({
    resolvingLocation: false,
    userCoordinates
  });
});
...