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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

281閲覧

現在位置と対象の距離が指定範囲内に複数ある場合、ダイアログを複数生成させたい

nekodayo

総合スコア1

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/04/22 03:03

前提

地図アプリを作成しています。

実現したいこと

現在位置と対象の距離が指定範囲内に複数ある場合、ダイアログを複数生成させたいですが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

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

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

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

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

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

guest

回答1

0

ベストアンサー

<div id="dialog"> の部分が複数欲しい、ということですよね。

まず、id="dialog" id="name" id="page-chanege"class=... にでも変えましょう。同じid値を持つ要素は複数存在できないからです。

もし、地点数が質問文のコードのように固定だったら、その個数ぶんのダイアログをHTML中に書いておきます。for ループの中で地点が指定範囲内だったら対応するダイアログを表示、範囲外だったら非表示にしましょう。

地点数がとても多くなるとか固定ではない、といった場合、ダイアログの雛形を <template> に入れておいて、必要になったらクローンして document.body に挿入しましょう。

また、ダイアログに名前と対象ページに遷移するボタンを置きたいです。

1つの質問で複数のことを解決しようとすると回答の負荷が高くなるので、まずは複数のダイアログを出せるようになってからあらためて聞くほうがよいと思います。

投稿2022/04/22 04:17

int32_t

総合スコア20672

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

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

nekodayo

2022/04/22 05:26

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問