JavaScriptで関数を呼びだしの繰り返しを
- GoogleMapを使ったアプリケーションをJavaScriptでプログラミングしています。現在地取得をしている関数内で現在地取得する度にバイブレーションをしています。もっと間隔を短くして振動させたいのですが方法はあるでしょうか？
- JavaScriptでGoogleMapを使用したアプリケーションを作成しています。現在地を取得するたびにバイブレーションを行っていますが、スマートフォンの性能によってはバイブレーションまでの時間が遅いです。より短い間隔でバイブレーションを行いたいのですが、方法はありますか？
- JavaScriptでGoogleMapを使ったアプリケーションを作成しています。現在地を取得するたびにバイブレーションを行いたいのですが、スマートフォンの性能によってはバイブレーションまでに時間がかかってしまいます。より短い時間でバイブレーションさせる方法はありますか？
- ベストアンサー
JavaScriptで関数を呼びだしの繰り返しを
GoogleMapを使ったアプリケーションをJavaScriptでプログラミングしています。 現在地取得をしている関数内で現在地取得する度にバイブレーションをしています。 その関数の呼びだしを繰り返し行って現在地を更新していますが、今の私のスマートフォンだと一度バイブレーションしてから次バイブレーションするまで１５秒程度かかります。 もっと間隔を短くして振動させたいのですが方法はあるでしょうか？ ソースは以下です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>VIBRATION1</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function vibration1(){ var x = 100; var pattern = [30]; var vibPattern = []; for(var i=0; i<pattern.length; i++){ vibPattern[i] = x * pattern[i]; } if(window.navigator.vibrate){ window.navigator.vibrate(vibPattern); }else if(window.navigator.mozVibrate){ window.navigator.mozVibrate(vibPattern); } else if(window.navigator.webkitVibrate){ window.navigator.webkitVibrate(vibPattern); }else{ alert("Not support."); } var msg = ""; msg += "window.navigator.vibrate = " + escape(window.navigator.vibrate) + "<br /><br />"; msg += "window.navigator.mozVibrate = " + escape(window.navigator.mozVibrate) + "<br /><br />"; msg += "window.navigator.webkitVibrate = " + escape(window.navigator.webkitVibrate) + "<br /><br />"; document.getElementById("msg").innerHTML = msg; } </script> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // 精度UPあり var position_options = { enableHighAccuracy: true }; // 現在位置情報を取得 navigator.geolocation.watchPosition(function(position) { var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(myLatlng); vibration1(); // マーカーの表示 var marker = new google.maps.Marker({ position: myLatlng, map: map }); }, null, position_options); } </script> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } </style> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>
- zexal1991
- お礼率10% (1/10)
- JavaScript
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
watchPosition メソッドは、ある程度の速度で移動して いないと(位置情報が変わらないと) コールバック関数が 呼び出されないようですが、検証時の移動速度が遅すぎ るとか、そういうことはないですか？ http://www6.ocn.ne.jp/~wot/web/html5/geoapi/wp.html パフォーマンスの問題は『どこで時間がかかっているかを 把握する』のが一番重要な作業です。まずは処理のポイント ごとに時間を出力するようにして、状況を正確に確認して みてください。
関連するQ&A
- googlemapについて教えてください。
googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。
以下のような、現在地を取得するhtmlコンテンツを作ったのですが、スマホによってきちんと取得できたり、Failed to start Geolocation serviceというメッセージが出たりします。いずれの場合もGPSはオンにしています。メッセージが出るのはブラウザーの影響とか何かあるのでしょうか？ブラウザーがサポートしていない場合はLocation APIがサポートされていません。と表示するようにしているのですが、Failed to start Geolocation serviceが出る原因が分かりません。ご存知の方がいらっしゃいましたら、教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>現在地取得</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style> #map { width: 480px; height: 640px; border: solid 1px #ccc; } </style> </head> <body> <h1>Location API サンプル</h1> <div id="map"></div> <div id="message"></div> <script> window.onload =function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), options); var marker = new google.maps.Marker({ position: latlng, map: map, title: '現在地' }); }, function(e) { document.getElementById('message').innerHTML = typeof e == 'string' ? e : e.message; }); } else { document.getElementById('message').innerHTML = 'Location APIがサポートされていません。'; } }; </script> </body> </html>
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
jQueryMobileを使って地図を表示したいと思っています。 ４か所にマーカーを表示させ、そのマーカーをクリックするとそれぞれのurlに飛ぶようにしたいのですが、うまくいきません。for文の中のgoogle.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});のところがおかしいのでしょうか？myMarkerを名前を変えながらgoogle.maps.event.addListenerをしていかないとだめなのでしょうか？教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Google マップの表示</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <style type="text/css"> <!-- #map_canvas { width:100%; height:400px; } --> </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> $(function() { var data = new Array();//マーカー位置の緯度経度 data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅', url:'http://www.jreast.co.jp/estation/stations/1039.html'}); data.push({position: new google.maps.LatLng(34.809445,135.532408), content: '太陽の塔', url:'http://park.expo70.or.jp/'}); data.push({position: new google.maps.LatLng(43.062584,141.353627), content: '時計台', url:'http://www15.ocn.ne.jp/~tokeidai/'}); data.push({position: new google.maps.LatLng(26.694183,127.877963), content: '美ら海水族館', url:'http://oki-churaumi.jp/'}); var latlng = new google.maps.LatLng(36.449567,137.636719); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); for (i = 0; i < data.length; i++) { var myMarker = new google.maps.Marker({ position: data[i].position, map: map, icon: "km.png" }); google.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;}); } $('#map_content').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); }); </script> </head> <body> <div data-role="page" id="map"> <div data-role="header"> <h1>Google マップの表示</h1> </div> <div data-role="content" id="map_content"> <div id="map_canvas"></div> </div> <div data-role="footer"> <h4>© map</h4> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- google map吹き出し
下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
- ベストアンサー
- AJAX
- JavaScriptが実装できない
初めまして。 Google Maps APIを使ってwebページ上でgoogle mapsを表示させようと思い htmlファイルとjavascriptファイルを実装したのですがうまく動きません。 ソースコードは以下の通りです。 googlemaps.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.0"); </script> <script type="text/javascript" src="googlemaps.js"></script> <title>指定した位置を中心とする地図</title> </head> <body> <p> 緯度<input id="lat" type="text" value="35.632997" /> 経度<input id="lng" type="text" value="139.648609" /> <button id="button">地図を作る</button> </p> <div id="map_canvas" style="width: 100%; height: 90%;"></div> </body> </html> googlemaps.js $(document).ready(function() { $("#button").click(function() { // input要素の値を取得し、マップの中心を決める var lat = $("#lat").val(); var lng = $("#lng").val(); var myCenter = new google.maps.LatLng(lat, lng); // 地図のオプション var myOptions = { zoom : 14, center : myCenter, mapTypeId : google.maps.MapTypeId.ROADMAP // 必須 }; // 地図の生成 var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // マーカーの生成 new google.maps.Marker( { position : myCenter, map : myMap, title : "Hello World!" }); }); }); firebugはgooglemaps.js 404 not foundといっているのでhtmlとjavascriptの連携が うまくいってないのだと思うのですが、どうすればいいのかわからず前にすすめません。 お詳しい方、ご教授ください。
- ベストアンサー
- JavaScript
- Google mapV3 display=non
失礼いたします。 Google maps V3 をタブメニューの中で表示させたいのですが、初期状態がdisplay=”none”のため、うまく表示できません。 Mapのタブメニューを初期状態で開いている display=”list-item” の状態だとうまく表示できています。 ・初動 display:none ↓ ・Map呼び出し前にjsにて強制表示 display:block ↓ Mapのtilesloadedイベント完了後に display:none のような流れで回避できるようですが、javascript の知識がないのでたいへん困っております。 現在 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('map_canvas'); var myOptions = { zoom: 17, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: 'タイトル' }); }); </script> となっております。 たいへんお手数ですが、どなたかご教授頂けると助かります。
- ベストアンサー
- JavaScript
- javascript クリックで複数の関数の実行
下のようにボタンをクリックした際にvib1()、vib2()を連続して実行しようとすると、1つ目のvib1()が実行されず、vib2()だけが実行されます。vib1()、vib2()を連続して実行する方法はないでしょうか。 <html> <head> <title>バイブレーションテスト</title> <script language="javascript" type="text/javascript"> function vib1() { target = document.getElementById("output"); target.innerHTML = "Penguin1"; navigator.vibrate([600,100]); } function vib2() { target = document.getElementById("output"); target.innerHTML = "Penguin2"; navigator.vibrate([300,100]); } </script> </head> <body> <input type="button" value="バイブレーション" onclick="vib1();vib2();"/><br /> <br /> <div id="output"></div> </body> </html>
- ベストアンサー
- JavaScript
- Google マップにマーカーと同心円を入れたい
2回目の質問です。前回の掲載期間で、解決できなかったため。 超初心者的質問ですが、教えてください。 Google マップのある地点を中心に、 マーカーと1km/5km/10kmなどの同心円（半透明で外側ライン）の2種を表示をしようとしています。 おのおの単独で表示することは、例がありわかりましたが、 その2つを同時に表示するために、scriptを変更するのがわかりません。 1. マーカーを表示するscript <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng( 緯度 , 経度 ), 地図サイズ ); //マーカーを追加(国会議事堂) var marker = new GMarker(new GLatLng( 緯度 , 経度 )); map.addOverlay(marker); } } //]]> </script> 2. 同心円を表示するscript <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <div id='map' style='width:700px; height:400px;'><br /></div> <script type="text/javascript"> var myLatLng = new google.maps.LatLng( 緯度 , 経度 ); var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 地図サイズ, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.5, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 95330, // 半径（ｍ） strokeColor: '#ff0000', // 外周色 strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight: 1 // 外周太さ（ピクセル） }); </script> この2ヶのscriptをどのようにつなげば、解決できるか教えてください。 JavaScriptの基本知識不足のため、書いていただければ助かります。
- ベストアンサー
- JavaScript
