お世話になります。
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で移動可能な状態になっています。
回答1件
あなたの回答
tips
プレビュー