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

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

ただいまの
回答率

88.92%

firebaseとmapを使ったwebチャットで位置情報を正しく取得できない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,180

Kenji-kawamura

score 27

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chatアプリ</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map, #pano {
    float: left;
    height: 50%;
    width: 45%;
  }
</style>
</head>
<body>

<!-- コンテンツ表示画面 -->
<div>
<div>
  名前<input type="text" id="username">
</div>
<div>
  <textarea id="text" rows="5"></textarea>
  <button id="send">送信</button>
  <button id="mapsend">視界送信</button>
  <button id="mapget">視界受信</button>
</div>
<div id="output"></div>
</div>
<!-- map関連のhtml -->
<div id="map"></div>
<div id="pano"></div>


<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script src="sweetalert-master/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">
<script>
  // Firebase接続
  // Initialize Firebase
  var x = 0;
  var y = 0;
  var tal = 0;
  var nol = 0;
  var usermap3 = 0;
  var usermap4 = 0;
  var usermap5 = 0;
  var usermap6 = 0;
  var mapx = 0;
  var mapy = 0;
  var config = {
    apiKey: "AIzaSyB3yaRU9pxASNmX86M7zt-fJWUBezHjetw",
    authDomain: "chat-f5b6c.firebaseapp.com",
    databaseURL: "https://chat-f5b6c.firebaseio.com",
    projectId: "chat-f5b6c",
    storageBucket: "chat-f5b6c.appspot.com",
    messagingSenderId: "539383756587"
  };
  firebase.initializeApp(config);

//MSG送受信
var newPostRef = firebase.database().ref();
//Submit:MSG送信
$('#send').on('click', function() {
  newPostRef.push({
    username: $('#username').val(),
    text: $('#text').val()
  });

  $('#text').val();
});
//MSGデータ受信
newPostRef.on("child_added", function(data) {
  var v = data.val(); //データの取得
  var k = data.key;
  var str = '<dl id="'+ k +'"><dt>'+ v.username +'</dt><dd>'+ v.text +'</dd></dl>';
  $('#output').prepend(str);
});

function all() {
navigator.geolocation.getCurrentPosition(
  function(position) {
    var data = position.coords;
    //データの整理
    lat = data.latitude;
    lon = data.longitude;
    //allert表示
    alert("緯度経緯は" + lat + "と" + lon);
    newPostRef.push({
      usermap1: lat,
      usermap2: lon
      //そもそもここで代入する手段がある
    });
  }
)
}

function set() {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      var data = position.coords;
      //データの整理
      tal = data.latitude;
      nol = data.longitude;
      alert("取得した値は" + tal + "と" + nol);
      newPostRef.push({
        change1: tal,
        change2: nol
      });
    }
  )
}

function mapper() {

  newPostRef.on("child_added", function(data) {
    var z = data.val();
    var kk = data.key;
    change3 = z.change1;
    change4 = z.change2;
    // x = z.usermap1;
    // y = z.usermap2;
    // console.log(usermap3);
    // console.log(usermap4);
    // console.log(usermap5);
    // console.log(usermap6);
    // // x = usermap5;
    // // y = usermap6;
    // console.log(x);
    // console.log(y);
  });

  function mapsInit(position) {

        var fenway = {lat: change3, lng: change4};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: fenway,
          zoom: 14
        });
        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('pano'), {
              position: fenway,
              pov: {
                heading: 34,
                pitch: 10
              }
            });
        map.setStreetView(panorama);
  };

  //2. 位置情報の取得に失敗した場合の処理
  function mapsError(error) {
    var e = "";
    if (error.code == 1) { //1=位置情報取得が許可されてない(ブラウザの設定)
      e = "位置情報が許可されてません";
    }
    if (error.code == 2) { //2=現在地を特定できない
      e = "現在位置を特定できません";
    }
    if (error.code == 3) { //3=位置情報を取得する前にタイムアウトになった場合
      e = "位置情報を取得する前にタイムアウトになりました";
    }
    alert("エラー:" + e);
  };

  //3.位置情報取得オプション
  var set ={
    enableHighAccuracy: true, //より高精度な位置を求める
    maximumAge: 20000,        //最後の現在地情報取得が20秒以内であればその情報を再利用する設定
    timeout: 10000            //10秒以内に現在地情報を取得できなければ、処理を終了
  };

  // function initialize() {
  navigator.geolocation.getCurrentPosition(mapsInit, mapsError, set);
  // }
}

//mapOnlyをメソッド

//クリックイベント
$('#mapsend').on("click", function() {
  // alert("テスト");
  all(); //値をfirebaseへセット
  set(); //mapへ代入するための値をを取得
  mapper();
  if(true) {
    swal("自分の位置情報を取得!", "自分の視界を送信しました", "success");
  } else {
    swal({
          title: "エラーが発生しました",
          text: "自動的にリロードされます",
          timer: 5000,
          showConfirmButton: false
        });
        setTimeout("location.reload()",5000);
  }
});


$('#mapget').on("click", function() {
  console.log("テスト1");
  fuck();
  console.log("到達してるよ");

  // mapper();
  // if(true) {
  //   console.log(usermap3);
  //     swal("相手の位置情報を取得!", "相手の視界を受信しました。画面下部に相手の視界が表示されます。", "success");
  // } else {
  //   // swal({
  //   //       title: "エラーが発生しました",
  //   //       text: "自動的にリロードされます",
  //   //       timer: 5000,
  //   //       showConfirmButton: false
  //   //     });
  //   //     setTimeout("location.reload()",5000);
  //   alert("エラー");
  // }
  // mapper();
});

//mapget関数
function fuck() {
  newPostRef.on("child_added", function(data) {
    var z = data.val();
    var kk = data.key;
    usermap3 = z.usermap1;
    usermap4 = z.usermap2;
    console.log(usermap4 + "取得済");
  });
  // console.log(mapx);
  // console.log(usermap6);
    function mapsInit(position) {

          var fenway = {lat: usermap3, lng: usermap4};
          var map = new google.maps.Map(document.getElementById('map'), {
            center: fenway,
            zoom: 14
          });
          var panorama = new google.maps.StreetViewPanorama(
              document.getElementById('pano'), {
                position: fenway,
                pov: {
                  heading: 34,
                  pitch: 10
                }
              });
          map.setStreetView(panorama);
    };

    //2. 位置情報の取得に失敗した場合の処理
    function mapsError(error) {
      var e = "";
      if (error.code == 1) { //1=位置情報取得が許可されてない(ブラウザの設定)
        e = "位置情報が許可されてません";
      }
      if (error.code == 2) { //2=現在地を特定できない
        e = "現在位置を特定できません";
      }
      if (error.code == 3) { //3=位置情報を取得する前にタイムアウトになった場合
        e = "位置情報を取得する前にタイムアウトになりました";
      }
      alert("エラー:" + e);
    };

    //3.位置情報取得オプション
    var set ={
      enableHighAccuracy: true, //より高精度な位置を求める
      maximumAge: 20000,        //最後の現在地情報取得が20秒以内であればその情報を再利用する設定
      timeout: 10000            //10秒以内に現在地情報を取得できなければ、処理を終了
    };

    // function initialize() {
    navigator.geolocation.getCurrentPosition(mapsInit, mapsError, set);
    // }
}



</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize">
</script>



</script>
</body>
</html>

エラー内容

simple.html:235 139.7197362取得済
4simple.html:235 undefined取得済
simple.html:209 到達してるよ
js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
_.rb @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38
_.oc @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:48
(anonymous) @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:59
_.k.setValues @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:104
rg @ js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:89
mapsInit @ simple.html:242
js?key=AIzaSyBykP3LGzhuVBBUDm59QpKWr43AZuqP1TI&callback=initialize:38 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number


途中まで取得していても最終的にundefineとなる。
firebaseに渡したデータは取得できるが、mapの緯度経緯に代入するとうまく動作しない。
汚いcodeですが、アドバイスお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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