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

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

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

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

Q&A

解決済

1回答

1497閲覧

【javascrit】配列から別の計算式の変数に代入したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

1クリップ

投稿2018/02/05 00:20

編集2018/02/05 02:51

お世話になります。
javascrit初心者で、質問すら誤っているかもしれませんが、ご容赦下さい。

やりたいこと

リスト形式のhtmlに店舗の情報を記載し、その店舗と店舗の緯度経度から距離を計算するプログラムを作成しようと考えています。
リストはsotableを利用して、並び替え可能になっており、その並び替えが完了してから
店舗Aと店舗Bの距離を計算できる様にしたいです。

やってみたこと

分からなさ過ぎて、完全に思いつきでやっていますが
①一先ず各リストの緯度輝度情報を変数に代入。

var poi0, poi1,poi2,poi3,poi4,poi5,poi6,poi7,poi8,poi9; var poi0 =[138.123456,36.123456]; //li="id1"の緯度経度 var poi1 =[138.123456,36.123456]; //li="id2"の〃 var poi2 =[138.123456,36.123456]; //li="id3"の〃 var poi3 =[138.123456,36.123456]; //li="id4"の〃 var poi4 =[138.123456,36.123456]; //li="id5"の〃 var poi5 =[138.123456,36.123456]; //li="id6"の〃 var poi6 =[138.123456,36.123456]; //li="id7"の〃 var poi7 =[138.123456,36.123456]; //li="id8"の〃 var poi8 =[138.123456,36.123456]; //li="id9"の〃 var poi9 =[138.123456,36.123456]; //li="id10"の〃      //上記のような形で配列を作成しています

②sortableの並び替え完了後に各liのidを取得。
これも配列で処理がしにくいのでは?と考え、value0~value09の変数に代入
(変数に代入したくても処理ができるのであれば、value0~value9の代入は不要です)

js

1$('#datas').sortable({ 2 update: function(){ 3 var log = $(this).sortable("toArray"); 4 $("#log").text(log); 5 6 var value0 = log[0]; 7 var value1 = log[1]; 8 var value2 = log[2]; 9 var value3 = log[3]; 10 var value4 = log[4]; 11 var value5 = log[5]; 12 var value6 = log[6]; 13 var value7 = log[7]; 14 var value8 = log[8]; 15 var value9 = log[9]; 16 17 } 18 });

上記の②の並び順から次の計算式を使って距離計算

参考サイト: 地球上の2点間の直線距離を求める

js

1//2点間を計算する関数 2var getSuccess = function(pos) { 3 //2拠点のlat:緯度,lng:経度 4 var geo = { 5 lat: pos.coords.latitude, 6 lng: pos.coords.longitude 7    lat2: pos.coords.latitude, //ここは個人で挿入したので違うかもしれませんが… 8 lng2: pos.coords.longitude //ここは個人で挿入したので違うかもしれませんが… 9 10 }; 11 //上記③で取得したid(奇数)の緯度経度情報をここに使いたい 12 var lat1 = geo.lat; 13 var lng1 = geo.lng; 14 15 //上記③で取得したid(偶数)の緯度経度情報をここに使いたい 16 var lat2 = geo.lat2; 17 var lng2 = geo.lat;2; 18 19 //距離の計算// 20 function getDistance(lat1, lng1, lat2, lng2) { 21 22 function radians(deg){ 23 return deg * Math.PI / 180; 24 } 25 26 return 6378.14 * Math.acos(Math.cos(radians(lat1))* 27 Math.cos(radians(lat2))* 28 Math.cos(radians(lng2)-radians(lng1))+ 29 Math.sin(radians(lat1))* 30 Math.sin(radians(lat2))); 31 } 32 /*結果*/ 33 alert(getDistance(lat1,lng1,lat2,lng2)); 34}; 35

勉強不足でこんな質問をすること自体お恥ずかしいのですが、皆様のお知恵を借りたいです!
又、「そんな事しなくても〇〇すればよくない?」みたいな事があるのであれば合わせて教えて頂きたいです。
宜しくお願い致します。

【追加】

html

1 <ul id="datas"> 2//店舗A <li id="1"><?php 3 // SELECT文を変数に格納 4 $sql = "SELECT * FROM shop LIMIT 0,1"; 5 $stmt = $dbh->query($sql); 6 foreach ($stmt as $row) { 7  echo $row['店舗A'].':'.$row['ADDRESS']; 8 9 }?> 10 </li> 11 12//店舗B <li id="2"><?php 13 // SELECT文を変数に格納 14 $sql = "SELECT * FROM shop LIMIT 1,1"; 15 $stmt = $dbh->query($sql); 16 foreach ($stmt as $row) { 17 // データベースのフィールド名で出力 18            echo $row['SHOP_NAME'].':'.$row['ADDRESS']; 19 }?> 20                </li> 21 22 //店舗C <li id="3"><?php 23 // SELECT文を変数に格納 24 $sql = "SELECT * FROM shop LIMIT 3,1"; 25 $stmt = $dbh->query($sql); 26 foreach ($stmt as $row) { 27  echo $row['SHOP_NAME'].':'.$row['ADDRESS']; 28 29 }?> 30 </li> 31 32                //↑の様なliが合計10件並びます 33          </ul>

上記の様なリストに店舗情報が表示されています。
この"店舗○"となっている部分のリストをsortableで移動可能な状態になっています。

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

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

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

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

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

x_x

2018/02/05 01:22

店舗A、店舗Bとはどれのことですか?
退会済みユーザー

退会済みユーザー

2018/02/05 01:33

すいません!実際のhtmlを追加致しました!
x_x

2018/02/05 01:39

店舗A、店舗Bが何を指しているのかわからないのですが……
退会済みユーザー

退会済みユーザー

2018/02/05 01:51

度々申し訳ございません。店舗Aと店舗Bはhtml内の$row[SHOP_NAME(店舗名)]の所にSQLから取得する形をとっています。その$rowの中に[IDO][KEIDO]と言うものもあり、その情報を取得してPHPで計算する予定だったのですが、色々な方の意見を伺うとSortableでリストを移動した後の情報が必要になるので、javascritを使う必要があると教えて頂きました。よってPHP⇒JS⇒PHPと言うよりはPHP⇒JS⇒JSで計算に変更しようと考えた次第です。分かりにくい説明で申し訳ございません。
x_x

2018/02/05 01:56

うーん、mine_kさんの頭の中にはどれとどれの間の距離を出せばいいのかわかっているのかもしれませんが、わたしには店舗Aも店舗Bもコード中に出現せず、どれなのかわかりません。
guest

回答1

0

ベストアンサー

まず、参考サイトはGeolocation APIを使って、「現地点」との距離を出すものです。すでに位置が分かっている店舗間の距離を出すだけならば、使う関数はgetDistance()だけでいいと思います。

JavaScript

1getDistance(地点1緯度, 地点1経度, 地点2緯度, 地点2経度);

例えば、poi0とpoi3間を出したければ、次のようになります。

JavaScript

1getDistance(poi0[1], poi0[0], poi3[1], poi3[0]);

(poiには経度、緯度の順で格納されているという前提)

-- 11:08追記
現状のデータの持ち方では扱いにくいので、例えば次のようにします。

JavaScript

1var poi = { 2 "p1": { lat: 36.023456, lng: 138.123456 }, 3 "p2": { lat: 36.023888, lng: 138.123888 }, 4 "p3": { lat: 36.024000, lng: 139.000000 }, 5 // 以下略 6};

JavaScript

1var id1 = "p1"; 2var id2 = "p2"; 3console.log(getDistance(poi[id1].lat, poi[id1].lng, poi[id2].lat, poi[id2].lng));

-- 19:35 コード例 追加

JavaScript

1 $('#datas').sortable({ 2 update: function(){ 3 var log = $(this).sortable("toArray"); 4 for (var i = 1; i < log.length; i++) { 5 console.log(getDistance(poi['p' + log[i - 1]].lat, poi['p' + log[i - 1]].lng, poi['p' + log[i]].lat, poi['p' + log[i]].lng)); 6 } 7 } 8 });

投稿2018/02/05 01:45

編集2018/02/05 10:37
x_x

総合スコア13749

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

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

退会済みユーザー

退会済みユーザー

2018/02/05 02:01

ありがとうございます!そうだったんですね! ちなみに… 距離を計算するにあたって、『②sortableの並び替え完了後に各liのidを取得。』の所で受け取った順番に計算する必要があるのですが、その部分もjavascritで対応できるものなのでしょうか? いくら考えてもそこが結び付かないです。。。
x_x

2018/02/05 02:16

データの持ち方について追記しました。
退会済みユーザー

退会済みユーザー

2018/02/05 03:00

丁寧な返答ありがとうございます。 今、html部分のコードにどこに店舗が並ぶのか追記いたしました。 ちなみにhtml部分はphpで読み出しており、それをjsの変数に代入する事がスキル的にできなかったので、 jsの以下の部分に別途緯度軽度を代入した次第です。 店舗A⇨var poi0 =[138.123456,36.123456]; //li="id1"の緯度経度 店舗B⇨ var poi1 =[138.123456,36.123456]; //li="id2"の〃 店舗C⇨ var poi2 =[138.123456,36.123456]; //li="id3"の〃 説明が下手でわかりにくいかと思いますが、htmlの店舗をドラッグ&ドロップで上下入れ替える事ができるので、デフォルトでは ・店舗A⇨店舗Bの距離 店舗B⇨店舗Cの距離を算出するようになりますが、D&Dすると ・店舗B⇨店舗Cの距離 店舗C⇨店舗Aの距離の様にコールバックが発生する度に計算が必要となります。
x_x

2018/02/05 10:35

まだわからない感じですかね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問