Leaflet 現在地の表示をしたい

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>

行動規範の内容に同意します

回答1件

アプリカンを使用して開発は解りませんが、自分これでやってます(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    }