Question

我正在玩steroids.js（来自Appgyver）试图利用iPhone的GPS并使用谷歌地图API在地图上绘制它。我在app对象中有一些方法，我从html页面的各个点调用。

对于每个html页面，我包含2个.js文件。一个是application.js（PASTEBIN），另一个是特定于该页面。在这种情况下，另一个.js文件是walking.js（PASTEBIN）。我所在的html文件是walking.html（下面包含html文件）。

运行此html时，它可以正常工作。该应用程序使用GPS运行并开始跟踪，在地图上绘制路线，并启动一个小计数器。

所以它开始于;

app.start_walk();

在walking.js。该方法调用另一个2;

counter.start();
map.start_tracking();

从这一点开始，一切都在运行并正常运行。但是，当我按下STOP键时，它被绑定到;

app.stop_walk();

调用;

map.stop_tracking();

我收到错误;

application.js:102 TypeError: 'undefinted' is not a function.

我可以摸索JS，但不太了解OOP背后的想法。如果有人能给我一些很棒的指针！如果你想看到应用程序的工作版本，我可以给你一个指向Appgyver Scanner qr代码的链接。

非常感谢任何帮助。欢呼声。

HTML文件;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>My Steroids App</title>

  <link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
  <link rel="stylesheet" href="stylesheets/application.css" />

  <script src="javascripts/onerror.js"></script>
  <script src="javascripts/console.log.js"></script>

  <!-- cordova.js is served from localhost to ensure the correct version -->
  <script src="http://localhost/appgyver/cordova.js"></script>
  <script src="components/steroids-js/steroids.js"></script>

  <script src="javascripts/application.js"></script>
  <script src="javascripts/walking.js"></script>

  <!-- google maps -->
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA_aKt-ZwMPraZTALCiBEoTZuIoVdffBU0&sensor=true"></script>

</head>
<body id='walking'>

  <header>
    <div class='left-button people'></div>
    <div class='title'><h2>New Walk</h2></div>
    <div class='right-button gps-signal'></div>
  </header>



        <div class='details-map-slider page'>
                <div class='slider'>

                        <!-- first page -->
                        <div class="content slide">
                                <!-- count down timer -->
                                <section class=''>
                                        <h1>
                                                <span class='minutes'>0</span>:
                                                <span class='seconds'>00</span>
                                        </h1>
                                <div><h5>TIME</h5></div>

                                </section>

                                <!-- walk details -->
                                <section class='bars inline-block pull-left'>
                                        <div class='distance span6'>
                                                <img src="">
                                                <div>0 <h6>m</h6></div>
                                                <div><h5>DISTANCE</h5></div>
                                        </div>
                                        <div class='divider'></div>
                                        <div class='pace span6'>
                                                <img src="">
                                                <div>0 <h6>min/km</h6></div>
                                                <div><h5>CURRENT PACE</h5></div>
                                        </div>

                                </section>

                        </div> <!-- end first page -->


                        <!-- second page -->
                        <div class="content slide">
                                <!-- count down timer -->
                          <section class=''>
                            small timer
                          </section>

                          <section class=''>
                            small timer
                          </section>

                          <section id='googlemap' class=''>
                            <div id='canvas'></div>
                            <!-- <div class='drag-arrow'></div> -->
                          </section>

                        </div> <!-- end second page -->




                </div>
        </div>



  <footer class='buttons'>
        <div class='slidenation'></div>
        <div class='inline-block'>
                <button class='green stop'><h4>Stop</h4></button>
                <button class='grey pause'><h4>Pause</h4></button>
        </div>
  </footer>

  <!-- jquery -->
  <script src="javascripts/jquery-1.8.2.min.js"></script>
  <script src="javascripts/jquery.easing-1.3.js"></script>


  <!-- page/map slider -->
  <script src="javascripts/jquery.iosslider.min.js"></script>

</body>
</html>

我运行一些方法后似乎无法访问某些对象？

0 个答案: