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

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

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

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

アプリカン

アプリカンは、複数のプラットフォーム(OS/マーケット)のアプリを簡単に開発・運用できるサービスです。HTML5をベースとしたワンソース・マルチプラットフォームサービスで、Android/iOS対応アプリを同時に開発することができます。

Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

2015閲覧

Leaflet 現在地の表示をしたい

shin0301

総合スコア15

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

アプリカン

アプリカンは、複数のプラットフォーム(OS/マーケット)のアプリを簡単に開発・運用できるサービスです。HTML5をベースとしたワンソース・マルチプラットフォームサービスで、Android/iOS対応アプリを同時に開発することができます。

Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/12/26 05:10

Leafletを使用し,現在地を表示させようとしております。

PCからでは想定通りの動き(現在地の表示)ができているのですが、
スマホ上で動かすと、Geolocation error: User denied Geolocation というエラーがアラートされます。

ちなみにアプリカンを使用して開発を進めております。
また、端末の位置情報、アプリの権限等もONにしてあります。
ソースは以下の通りです。

コード <!DOCTYPE html> <html> <head> <title>Leaflet Plugin Locate</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> <!-- plugin --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/L.Control.Locate.min.css" /> <script src="js/L.Control.Locate.min.js"></script> <!-- plugin --> <style type="text/css"> #mapid { height: 400px; width: 600px} </style> </head> <body> <div id="mapid"></div> <script> // Mapの基本設定 var map = L.map('mapid',{ center: [35.7122, 139.8117], zoom: 15, minZoom: 13, maxZoom: 16 }); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' }).addTo(map); // Locate var option = { position: 'topright', strings: { title: "現在地を表示", popup: "いまここ" }, locateOptions: { maxZoom: 16 } } var lc = L.control.locate(option).addTo(map); // マップ表示時に現在地を取得 lc.start(); </script> </body> </html>

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

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

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

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

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

guest

回答1

0

アプリカンを使用して開発は解りませんが、自分これでやってます(PC用)参考になれば

jvascript

1 2// 現在地マカー表示 3 ViwLocate = function (){ 4 // Locate 地図に現在地を表示 5 // ユーザーの端末がGeoLocation APIに対応しているかの判定 6 // 対応している場合 7 if( navigator.geolocation ){ 8 // 現在地を取得 9 navigator.geolocation.getCurrentPosition( 10 // [第1引数] 取得に成功した場合の関数 11 function( position ){ 12 var data = position.coords ; 13 var lat = data.latitude ; 14 var lng = data.longitude ; 15 //map.setView([lat, lng], 10); 16 var maker_icon = L.icon({ 17 iconUrl: './images/nc14.gif',  //画像ファイルパス  18 iconRetinaUrl: './images/nc14.gif', //モバイル用画像ファイルパス 19 iconSize: [70, 70], //アイコンのサイズ 20 iconAnchor: [25, 50], //画像のオフセット位置 21 popupAnchor: [8, -42],//ポップアップの表示位置 22 }); 23 Locmaker = L.marker([lat, lng],{icon: maker_icon}).bindPopup("ここにいます").addTo(map); 24 }, 25 // [第2引数] 取得に失敗した場合の関数 26 function( error ){ 27 // エラーコード(error.code)の番号 28 // 0:UNKNOWN_ERROR 原因不明のエラー 29 // 1:PERMISSION_DENIED 利用者が位置情報の取得を許可しなかった 30 // 2:POSITION_UNAVAILABLE 電波状況などで位置情報が取得できなかった 31 // 3:TIMEOUT 位置情報の取得に時間がかかり過ぎた… 32 // エラー番号に対応したメッセージ 33 var errorInfo = [ 34 "原因不明のエラーが発生しました…。" , 35 "位置情報の取得が許可されませんでした…。" , 36 "電波状況などで位置情報が取得できませんでした…。" , 37 "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。" 38 ]; 39 var errorNo = error.code ; 40 var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ]; 41 alert(errorMessage); 42 } ,{ 43 // [第3引数] オプション 44 "enableHighAccuracy": false, 45 "timeout": 8000, 46 "maximumAge": 2000, 47 } 48 ); 49 // 対応していない場合 50 } else { 51 var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。" ; 52 alert(errorMessage); 53 } 54 }

投稿2020/04/22 00:05

shin0859

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問