1

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

对于每个 html 页面，我都包含 2 个 .js 文件。一个是 application.js ( PASTEBIN )，另一个是特定于该页面的。在这种情况下，另一个 .js 文件是 walk.js ( PASTEBIN )。我所在的 html 文件是 walk.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 二维码的链接。

任何帮助将不胜感激。干杯。

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>
4

0 回答 0