<!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ですが、アドバイスお願いします。
あなたの回答
tips
プレビュー