Question

我想知道为什么添加地图时地理位置会大大降低。如果我仅单击页面即可找到它，则该页面立即生效。如果我将地图添加到页面上却不执行任何操作，则要花一点时间才能获得第一个位置，因此肯定会降低watch.position功能的速度吗？也许我在代码上犯了一个错误，但是没有得到错误

当我没有在页面上显示地图时的代码是

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track all on map</title>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>
        #map {
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
    </head>
<body>
<div id="map"></div>
    <button type="button" id="toggleWatchBtn">Go online</button><BR><BR>
    <input name="lat" type="text" id="lat" value=""><BR>
<input name="lng" type="text" id="lng" value=""><BR><BR>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>   
</body>
<script src="/socket.io/socket.io.js"></script>
<script> var username = prompt('What\'s your username?'); </script>
<script>
//socket = io.connect('/');
//socket.emit('add user', username);

</script>
<script type="text/javascript">

    // Set global variable
    var watchID;
    function showPosition(){
        if(navigator.geolocation){
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else{
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }
    function successCallback(position){
        toggleWatchBtn.innerHTML = "Stop Watching";

        // Check position has been changed or not before doing anything
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            //alert("MOVED");
            document.getElementById('lat').value = position.coords.latitude;
            document.getElementById('lng').value = position.coords.longitude;

    var new_lat = document.getElementById("lat").value;
    var new_lng = document.getElementById("lng").value;
    var new_message = "Moving icon";

    var Details={  
    username : username,  
    active : true,
    new_lat : new_lat,
    new_lng : new_lng,
    update : true  
    }; 

    socket.emit('new_coords', Details);


}



            // Set previous location
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;

            // Get current position
            var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;

        }

    function startWatch(){


        var result = document.getElementById("result");

        var toggleWatchBtn = document.getElementById("toggleWatchBtn");

        toggleWatchBtn.onclick = function(){
            if(watchID){
                toggleWatchBtn.innerHTML = "Start Watching";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            }
            else{
                toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
                showPosition();
            }
        }
    }

    // Initialise the whole system (above)
    window.onload = startWatch;

</script>
</html>

并且如果我将地图添加到以下内容中，则地理位置定位会变得非常缓慢。

map = L.map('map');
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
          maxZoom: 20,
      maxNativeZoom: 20,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(map);


                      map.locate({setView: true,
                       maxZoom:20, 
                       watch:true
                      });

为什么会减慢一切速度？

Answer 1

很抱歉，这是因为我同时打开了导航器监视和传单表监视。

在sceen上加载地图时，地理定位速度较慢

1 个答案: