JavaScriptのGPSで現在地を取得する方法とは？

前へ 次へ
このQ&Aのポイント
  • JavaScriptのGPSを用いて現在地の取得方法について説明します。
  • 質問者はGoogleMapで現在地の地図を表示し、保存する機能を作成中ですが、iPhoneでもAndroidでもなぜかバルセロナが表示されてしまう問題が発生しています。
  • Monacaでの開発環境を使用しています。
回答を見る
  • ベストアンサー

JavaScriptのGPSについて

現在地の名前を入力し、GoogleMapで表示してその地図を保存するというものを作ったのですが 以下のコードで現在地を取得するとなぜかiPhoneでもAndroidでもバルセロナが表示されます なぜなのでしょうか？ 開発環境はMonacaです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <h1>ブックマークMAP</h1> <div id="new_div"> 店名：<input id="name_txt" type="text" value="" size="20" /><br /> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\n"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } </script> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
noname#247307
noname#247307
回答No.4

>JavaScriptを始めたばかりで本を見ながら作って見ました そういうことでしたら、Google MapsやGPS云々の前に、まずJavaScriptの基本文法からしっかりと学ばれたほうがよいと思います。いきなり、面白そうな機能に飛びついても、基礎がないと何一つ身になりませんから。 今回の質問も、関数の定義、配列の操作といった基本がわかっていればおそらく自力で解決できたでしょう。基礎はあまり面白くありませんが、基礎がないと面白いものは作れません。がんばってください。

DreamyLife_615
質問者

お礼

わかりました ありがとうございます！

その他の回答 (3)

noname#247307
noname#247307
回答No.3

>不要となったリストを削除したいということです そのつもりで回答しました。 質問のスクリプトは、あなたが作成したものですよね？　よく見て下さい。items配列がすべてのデータの元になっていることがわかりませんか？ まず、items配列から特定の要素を削除する関数を作成してみてください。 そして、<a>タグを生成したり、localStorageに保存をする部分を関数として切り分けてみてください。 ダミーのボダンなどを作り、itemsから要素を削除し、<a>タグを更新し、localStorageに保存する、といった処理をテストとして行わせてみてください。それぞれの関数が正しく動いたら、後はそれを具体的にどう実装するかを考えればいいでしょう。チェックボックスをつけたりといったことは最後に考えればいいことです。まずは、items配列を操作する関数を考えてみてください。 自分なりに作って動かし、うまくいかなければ、あなたが作ったリストを掲載して改めて質問して下さい。

DreamyLife_615
質問者

お礼

リストの横にボタンを付けてそのボタンが押されたら削除するという仕様にしようと思い以下の通り書いてみたのですがやはり動きません ボタンは表示されました 書き換えたところは >//記録ボタンを押した時の設定 →//記録ボタン・削除ボタンを押した時の設定 最後の部分にfunctionの追加です <body bgcolor="#C2F2A5"> <center> <font face="HG創英角ポップ体"> <h1>ブックマークMAP</h1> </center> <div id="new_div"> <span id="name">場所：<input id="name_txt" type="text" value="" size="20" /><br /></span> </font> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタン、削除ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; $("del_btn").onclick = del_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\t"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"<input id='del_btn' type='button' value='削除'>"+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "\t" + lat + "\t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } //削除ボタンが押されたとき function del_btn_clickHandler(){ delete items; } </script> delete itemsのitemsを<a>やdataにしてみたのですがやはり動きません・・・。

DreamyLife_615
質問者

補足

ありがとうございます JavaScriptを始めたばかりで本を見ながら作って見ました やはりリストの削除は今は全くわかりません ですが勉強してそれでもわからなかったら改めてまた質問させてください

noname#247307
noname#247307
回答No.2

>この追加したリストを削除する場合はどうすればいいのですか？ データは、items配列に保管されていますよね？　ですから、items配列から削除したい項目を探して取り除いてから<a>タグの生成やloalStorageの保存などを行って更新すればいいでしょう。

DreamyLife_615
質問者

補足

名前を入れて記録してリストを追加していくわけなのですが 不要となったリストを削除したいということです チェックボックスなどを右横に配置してやってみたのですが チェックボックスすら表示されない始末です＞＜ どうすれば一番うまくいきますか？

noname#247307
noname#247307
回答No.1

ざっと試してみましたが、GPSの情報の保存・取得が正しく行われていないからですね。保存するときにセパレータを"\n"で指定し、取り出すときにセパレータを"/t"と指定していますから、値が正しく配列化できず、結果として緯度経度情報がundefindedの状態で<a>タグのhrefにパラメータ設定されています。2箇所の修正が必要です。 ※1つ目 //for (var i in items)の処理部分 var data = items[i].split("\n"); 　　↓ var data = items[i].split("\t"); ※2つ目 //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; 　　↓ var item = name_txt.value + "\t" + lat + "\t" + lon;

DreamyLife_615
質問者

補足

ありがとうございます！！ GPSの多少の誤差はありますが出来ました！！ 申し訳ございませんがもう一つお聞かせください この追加したリストを削除する場合はどうすればいいのですか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JSでのタグの削除方法について

    以下のコードなのですが現在地を取得してリスト化して保存するというものです 追加された<a>の横に削除ボタン(del_btn)を設置し、押されたらリストを削除をいう風にしたいのですが どうしてもできません コードの下部の //削除ボタンが押されたとき の部分の正しい記述がわかりません ご教授お願いします <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> </head> <body bgcolor="#C2F2A5"> <center> <font face="HG創英角ポップ体"> <h1>ブックマークMAP</h1> </center> <div id="new_div"> <span id="name">場所：<input id="name_txt" type="text" value="" size="20" /><br /></span> </font> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタン、削除ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; $("del_btn").onclick = del_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\t"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"<input id='del_btn' type='button' value='削除'>"+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "\t" + lat + "\t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } //削除ボタンが押されたとき function del_btn_clickHandler(){ delete "<'a'>"; } </script> </body> </html>

  • JavaScriptについて

    以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものです なぜか追加ボタンを押しても反応がありません なぜでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1> <!--新規追加ボックス--> <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div> <!--項目一覧--> <div id = "items_div"></div> <!--項目の操作パネル--> <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

  • JavaScriptで得た値を別ページに反映

    JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>

  • JavaScript　オンマウスで画像切り替え、テキスト切り替え

    javascriptで困っています。 あるテキストに一回のオンマウスで、 idを持った箇所の画像を切り替え、 また別のidをもった箇所にテキストを表示させたいのですがうまくいきません。 今までのコードはこちらです。 script -------------- function swap(n) { var items = [ { TextA:"あああ", ImageB:"../../common/logo.gif"}, { TextA:"２２２", ImageB:"../../common/logo.gif"}, { TextA:"３３３", ImageB:"../../common/logo.gif"} ]; var o = document.getElementById("Main"); $("Txt").innerText = items[n].TextA; $("Photo").src = items[n].ImageB; } html ---------- <div id="Main"> <img src="../logo.gif" alt="" name="Photo" width="120" height="60" id="Photo"> <div id="Txt" name="Txt">最初</div> </div> <A href="#" onmouseover="swap(0)">１</A><br> <A href="#" onmouseover="swap(1)">２</A><br> <A href="#" onmouseover="swap(2)">３</A> 詳しい方、どうぞご教授よろしくお願い致します。

  • JavaScriptでのcheckbox作成

    JavaScriptのcheckbox作成について教えてください 突然のリクエスト申し訳ございません お時間があればご回答お願いします ToDoメモを作っておりまして、仕様としては input type="text"に文字を書き込んで追加ボタンを押せばtextboxの下に 書き込まれた内容がリストのような形で表示されます そのリストの横にチェックボックスをつけてチェックして削除ボタンを押すと削除できるという仕組みです ですがチェックボックスのサイズが小さいです どうすればサイズを大きくできるのでしょうか？ JavaScriptでcheckboxを作成するコードは下記の通りです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); // // TODO: Please edit your JavaScript code here // </script> <style> h1 { color : #4795F4; } </style> </head> <body background="img/st18.png"> <center><h1>ToDoメモ</h1> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> </center> <!--新規追加ボックス--> <center><div id="new_div"> <input id="new_txt" type="text" value="" style="width:270px" size="40"/></center> <br><img src="img/blmenu.gif" width="50" height="25" id="add_btn" /> </div> <!--項目一覧--> <div id="items_div"></div> <!--項目の操作パネル--> <div id="control_div"> <img src="img/blmenu.gif" width="50" height="25" id="done_btn"/> </div> <!--Android1.6対策--> <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; 　alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

  • jQueryのclickイベントハンドラ

    最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。

  • javascriptで困っています。教えてください

    html5でcanvasに描いた画像をsave_buttonを押してlocalStorageで保存して、それをload_buttonをおして読み込もうとしているのですが、うまくいきません。 canvas.toDataURL();でデータを6bit毎に分割できています。 それを保存して、 var base64 = window.localStorage.getItem("saveKey");で読み込むこともできています。 その後canvasに描画できません。 よろしくお願いします。 var canvas = document.getElementById("myCanvas"); $("#save_button").click(function () { 　　 // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas.toDataURL(); // LocalStorageに保存する window.localStorage.setItem("saveKey", base64); }); $("#load_button").click(function () { // LocalStroageからデータを取得する var base64 = window.localStorage.getItem("saveKey"); // Imageオブジェクトを作成し、src属性にデータを設定する var image = new Image(); image.src = base64; image.onload = function(){ // 画像の読み込みが終わったら、Canvasに画像を反映する。 canvas.drawImage(image, 0, 0); } });

  • javascriptで困っています。教えてください

    読み込まれたら、watchPositionで位置情報を取得し続け、ボタンを押したタイミングでmap_draw関数を実行して、地図を表示させようと思っています。そのときseidoが５以下のときだけ地図を表示させたいので、seidoが５より大きいときは、map_draw関数をもう一度呼び出すループを考えました。しかし、watchPositionではきちんとseido = position.coords.accuracy;の値がとれており、５以下になっているのですが、map_draw関数のなかでseidoの変数をうまく取得できません。map_draw関数では最初の一回目だけ取得して、後は値が変わりません。ループの部分に問題があるのでしょうか？教えていただければと思い投稿しました。よろしくお願いします。 <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript" charset="utf-8"> var ido; var keido ; var seido ; var map; var btn; window.onload = function(){ btn = document.getElementById("btn"); btn.addEventListener('click', map_draw, false); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); } function update(position){ ido = position.coords.latitude; keido = position.coords.longitude; seido = position.coords.accuracy; 　　　　　　　　 　　var htmlTxt = "Lat." + ido + "Lng" + keido+ "Acc" + seido; htmlTxt += "<br>"+(new Date()); var pos = document.getElementById("pos"); pos.innerHTML = htmlTxt; } function poserror(position){ alert("error"); 　　　　　　　　} function map_draw(){ if(seido>5){ map_draw(); }else{ 　var lat = ido; 　var lng = keido; 　var Latlng = new google.maps.LatLng( lat , lng ); var myOptions = { 　zoom: 17, 　center: Latlng, 　mapTypeId: google.maps.MapTypeId.ROADMAP 　 }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); } } </script> </head> <body> <p id="pos">情報</p> <div id="map_canvas" style="width:480px; height:640px;">地図</div> <button id="btn">地図を描く</button> </body>

  • 2度押し防止のJavascript

    先日、「買い」のボタンを押すと、100購入～800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様　有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。 それが末尾のスクリプトになります。 質問 買いボタンの2度押し防止は出来ていますが、100購入　200購入　300購入の連続買いができてしまう状況です。 この連続買いの防止のjavascriptをご教示いただければと思います。 当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが 　　　　100購入　200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する