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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

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

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

0回答

1905閲覧

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

knj

総合スコア37

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

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

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2017/05/22 12:13

編集2017/05/24 11: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ですが、アドバイスお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問