質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    20945questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Javascriptで前半に定義した変数を後半のfunction内に代入したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 919

Motsu

score 11

前提・実現したいこと

前半のlatitudeとlongitudeで定義した緯度経度を、
後半のmap.panTo内の●●●●に代入したいと考えています。

方法をお教えいただければ幸いです。

問題

panToを使うと良さそうだというところまでは分かりましたが、
panToでlatlngを呼び出そうとすると動作せず、困っています。

なお、以下のように緯度経度を直接打ち込むと正しく動作します。
map.panTo(new google.maps.LatLng(35.681304, 139.766052));

また、HTMLのonclickを"onDeviceReady()"にしてしまうことで、
マップをリロードさせて現在地に戻すという方法も考えましたが、
この方法あまり良い方法ではないような気がします。

不勉強で申し訳ありませんが、実現方法をご教授ください。

ソースコード

▼HTML

<div id="map_canvas"></div>
<div onclick="toMarker()"></div>

▼Javascript

<script>
    var map = null; // 地図オブジェクト
    $(function(){
        $(document).on('deviceready', onDeviceReady);
    });

    function onDeviceReady() {
        // GPS センサーにアクセスして現在位置情報を取得する
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

    // 現在地の取得に成功した場合に呼び出される関数
    function onSuccess(position){
        // position に含まれる緯度経度情報を取得
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log('緯度: ' + latitude);
        console.log('経度: ' + longitude);

        // 緯度経度情報を元にLatLngオブジェクトを作成
        var latlng = new google.maps.LatLng(latitude, longitude);
        createMap(latlng);
    }

    // 現在地の取得に失敗した場合に呼び出される関数
    function onError(error){
        alert(error.message);
    }

    // 地図を作成する関数
    function createMap(latlng) {
        // 地図のオプション
        var mapOption = {
            zoom: 14, // ズームレベル
            center: latlng, // 現在の緯度経度を地図のセンターにする
            mapTypeId: google.maps.MapTypeId.ROADMAP, // 地図のタイプ
        };

        // Mapオブジェクトを作成
        map = new google.maps.Map($('#map_canvas').get(0), mapOption);

        // 現在地マーカーの作成
        var marker = new google.maps.Marker({ position: latlng, map: map });
    }

    // 現在地へ戻る
    function toMarker() {
        map.panTo(new google.maps.LatLng(●●●●));
    }
</script>

補足情報

・Monacaを利用
・公式サンプル(https://ja.monaca.io/book/support/)の8-1地図アプリをカスタマイズ

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

プログラムを動作するように修正するのは、そこは、ご本人様にがんばって頂くとして、

うまく動作しない、なぜ?のヒントのみ記載させていただきます。

まず、おそらく、代入したいという、latitudeとlongitudeは、

function onSuccess(position){
        // position に含まれる緯度経度情報を取得
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;


ここで、記載されている変数のことかと思います。

この、変数

var latitude = position.coords.latitude;
var longitude = position.coords.longitude;


は、

function onSuccess()


という関数の、で定義されていますので、この関数の中でのみ使える変数です。
希望は、たぶん、

map.panTo(new google.maps.LatLng(latitude, longitude));


と書きたいのかと思いますが、さきほどと重複しますが、latitudeとlongitudeは、onSuccess関数内でのみ利用できるように定義されているので、上記コードは、実行できません。
どの言語にも関連する、プログラミングの基本概念ですので、

「変数 スコープ」

などの、キーワードで、ぜひこの辺りは、きちんと学ばれるとよいかと思います。
そして、自ら納得して、動作するように修正されるのが、よろしいかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/28 12:33

    アドバイスありがとうございます。
    やはりそのfunctionで定義した関数内でしか動作しないわけですね。

    となると、function toMarker() として再度関数を定義して、
    その中で latitude, longitude を定義し、使っていくことになると思いますが、
    この場合、何度やってもエラーが出てしまっていました。

    例えば以下の形では、<div onclick="toMarker()">をクリックした際に
    画面が真っ白になってしまいます。

    ```
    function toMarker() {
    navigator.geolocation.getCurrentPosition(pos);
    }

    function pos(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    map.panTo(new google.maps.LatLng(latitude + ', ' + longitude));
    }
    ```

    function pos(position) に map.panTo を含めるあたりに
    エラーの元があるのかなと思いますが、ここから先に進めず、
    そもそも function onSuccess 内で動かせないかなと考え直しています。

    初歩的な質問で申し訳ありませんが、どこでエラーが起きているのか
    ヒントをいただければ幸いです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    20945questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。