前提
地図アプリを作成しています。
実現したいこと
現在位置と対象の距離が指定範囲内に複数ある場合、ダイアログを複数生成させたいですがdivの生成方法がわかりません。
また、ダイアログに名前と対象ページに遷移するボタンを置きたいです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 </head> 7 <body style="margin: 0; overflow: hidden"> 8 <div id="dialog"> 9 <a id="name"></a> 10 <input 11 type="button" 12 onclick="onButtonClick()" 13 id="page-chanege" 14 title="Page Chanege" 15 class="page-chanege" 16 value="open" 17 /> 18 <input type="button" value="close" onclick="clickBtn()" /> 19 </div> 20 21 <script> 22 function clickBtn() { 23 const dialog = document.getElementById("dialog"); 24 if (dialog.style.visibility == "visible") { 25 dialog.style.visibility = "hidden"; 26 } 27 } 28 let data = [ 29 [ 30 "東京駅", 31 "https://www.gransta.jp/", 32 35.68153248141598, 33 139.76459279236056, 34 ], 35 [ 36 "東京タワー", 37 "https://www.tokyotower.co.jp/", 38 35.658574149010626, 39 139.74542996403432, 40 ], 41 [ 42 "東京スカイツリー", 43 "https://www.tokyo-skytree.jp/", 44 35.71005048264646, 45 139.81068979649478, 46 ], 47 [ 48 "雷門", 49 "https://www.senso-ji.jp/guide/guide01.html", 50 35.71000915099042, 51 139.79493921318928, 52 ], 53 ]; 54 55 // 現在位置取得 56 let lat = document.getElementById("lat"); 57 let lng = document.getElementById("lng"); 58 let map = document.getElementById("map"); 59 60 navigator.geolocation.getCurrentPosition((position) => { 61 let coords = position.coords; 62 lat = coords.latitude; 63 lng = coords.longitude; 64 console.log(lat, lng); 65 66 // 緯度経度で2点間の距離を測る方法 67 function distance(lat1, lng1, lat2, lng2) { 68 lat1 *= Math.PI / 180; 69 lng1 *= Math.PI / 180; 70 lat2 *= Math.PI / 180; 71 lng2 *= Math.PI / 180; 72 return ( 73 6371 * 74 Math.acos( 75 Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + 76 Math.sin(lat1) * Math.sin(lat2) 77 ) 78 ); 79 } 80 for (let i = 0; i < data.length; i++) { 81 const lB = data[i][2]; 82 const LB = data[i][3]; 83 84 // 経度、緯度を定義 85 let myLat = lat, // 現在位置の緯度 86 myLng = lng, // 現在位置の経度 87 destinationLat = lB, // 目標の緯度 88 destinationLng = LB; // 目標の経度 89 var X = distance(myLat, myLng, destinationLat, destinationLng); 90 console.log(X); 91 if (X < 30) { 92 const nameList = document.createElement("a"); 93 nameList.textContent = data[i][0]; 94 document.getElementById("name").appendChild(nameList); 95 console.log(nameList); 96 97 console.log("範囲内", data[i][0]); 98 dialog.style.visibility = "visible"; 99 100 window.onButtonClick = function onButtonClick() { 101 onclick = location.href = data[i][1]; 102 }; 103 } 104 } 105 }); 106 </script> 107 108 <style> 109 #dialog { 110 width: 250px; 111 margin: auto; 112 margin-top: 40vh; 113 padding: 20px 20px; 114 text-align: center; 115 background-color: blue; 116 visibility: hidden; 117 } 118 </style> 119 </body> 120</html> 121 122
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/22 05:26