javascript - Html5 地理位置clearWatch() 没有响应

标签 javascript html geolocation

我编译并调整了此演示脚本,以便从其他脚本的部分内容中学习地理定位跟踪。到目前为止一切顺利...但是用于停止搜索或跟踪的函数clearWatch()没有响应,因为它后面的alert()没有显示。

我忘记了什么?

<!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,愚蠢的我,我最关注的是地理定位调用,而忘记查看 javascript 问题。所以,clearWatch()没有响应的原因是:变量startId和trackId没有在JS的顶部声明。我把声明放在了调用中:var startId = ....,所以我调整了脚本,现在就可以了!

请随意使用和/或编辑此脚本作为您项目的基础。

关于javascript - Html5 地理位置clearWatch() 没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14505343/

相关文章:

javascript - 在 Bootstrap 选项卡上调整大小后,谷歌地图标记不居中

javascript - 如何从维基百科的信息框获取数据?

javascript - 从 react-router 浏览器 History 对象获取当前页面路径

php - 使用 iframe 全屏时 Bootstrap 一页主题不适用于嵌入视频

php - 如何使表单字段成为必填项

iphone - 确定 iPhone 用户所在的国家/地区

python - Tweepy 位置过滤器不起作用

javascript - JS - 创建新 worker 导致 404

javascript - 为什么这个 Brain.js 脚本太慢了?

html - 如何设置下载链接的文件名?