1

私は（Appgyverの）steroids.jsをいじって、iPhoneのGPSを試して利用し、GoogleマップAPIを使用して地図上にプロットしています。HTMLページのさまざまなポイントから呼び出すアプリオブジェクトにいくつかのメソッドがあります。

HTML ページごとに 2 つの .js ファイルを含めています。1 つは application.js ( PASTEBIN ) で、もう 1 つはそのページに固有です。この場合、もう 1 つの .js ファイルは walk.js ( PASTEBIN ) です。私がいるhtmlファイルはwalking.htmlです（htmlファイルは以下に含まれています）。

このhtmlを実行すると正常に動作します。アプリが実行され、GPS を使用して追跡を開始し、地図上にコースをプロットし、小さなカウンターも開始します。

それで、それはで始まります;

app.start_walk();

walk.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 スキャナーの 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>
4

0 に答える 0