Html5 Geolocation clearWatch() is not responding

I compile and adjust this demo script for learning tracking with geolocation from parts of other scripts. So far so good... but the functions clearWatch() to stop searching or tracking are not responding because the alert() after it is not showing up.

Something I forgot?

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100% ; width:100%;}
            </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">

            var previousPosition = null;
            var startId;
            var trackId;

            function initialize() {
                document.getElementById("info").innerHTML = "Je positie aan het zoeken...";

                if (navigator.geolocation) {

                    startId = navigator.geolocation.watchPosition(function(position) {
                        var startPos = position;
                        var startAccuracy = startPos.coords.accuracy;
                        document.getElementById("info").innerHTML = "In de buurt... ca." + startAccuracy + " meter...";
                        if(startAccuracy < 3) {
                            document.getElementById("info").innerHTML = "Gevonden... binnen " + startAccuracy + " meter...";
                            map = new google.maps.Map(document.getElementById("map_canvas"), {
                                zoom: 18,
                                center: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                                });
                            var marker = new google.maps.Marker({
                                position: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
                                map: map
                                });
                            navigator.geolocation.clearWatch(startId);
                            document.getElementById("info").innerHTML = "Tracking start over 5 seconden...";
                            setTimeout(function(){startTracking()},5000);
                        }
                        }, function(error) {
                        alert("Error code: " + error.code);
                        // error.code can be:
                        //   0: unknown error
                        //   1: permission denied
                        //   2: position unavailable (error response from locaton provider)
                        //   3: timed out
                        }, {maximumAge:1000, enableHighAccuracy: true});

                }
                else {
                    alert("GeoLocatie wordt niet ondersteund!");
                }

            }

            function startTracking() {

                document.getElementById("info").innerHTML = "Tracking is gestart...";

                trackId = navigator.geolocation.watchPosition(successCallback, null, {maximumAge:1000, timeout:60000, enableHighAccuracy:true});

                function successCallback(position){
                    map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
                     if (previousPosition){
                        var newLineCoordinates = [
                                                  new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
                                                  new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];

                        var newLine = new google.maps.Polyline({
                                                               path: newLineCoordinates,
                                                               strokeColor: "#FF0000",
                                                               strokeOpacity: 1.0,
                                                               strokeWeight: 2
                                                               });
                        newLine.setMap(map);
                    }
                    previousPosition = position;
                };

            }

            function stopZoeken() {
                navigator.geolocation.clearWatch(startId);
                alert("Zoeken gestopt!");
            }

            function stopTracking() {
                navigator.geolocation.clearWatch(trackId);
                alert("Tracking gestopt!");
            }

            </script>
    </head>

    <body onload="initialize()">
        <div id="info"></div>
        <div><input type="button" onclick="stopZoeken()" value="Stop Zoeken" />&nbsp;&nbsp;&nbsp;<input type="button" onclick="stopTracking()" value="Stop Tracking" /></div>
        <div id="map_canvas"></div>
    </body>

</html>

Grrr, stupid me, I focus most on the geolocation calls and forgot to look at the javascript issue. So, the reason why clearWatch() was not responding was: the vars startId and trackId were not declared at top in JS. I put the declaration in the call: var startId = ...., so I adjusted the script and it's ok now!

Feel free to use and/or edit this script as a basis for your project.

来源：https://stackoverflow.com/questions/14505343/html5-geolocation-clearwatch-is-not-responding

标签

javascript

html5

geolocation