Googleマップ実装の問題とAPI接頭辞エラー

!!更新しました！！Googleマップ実装の問題とAPI接頭辞エラー

正しく表示するにはGoogleマップを取得するのに少し問題がありますが、コンソールログにこのエラーが表示されます。私は例文hereにリストされている接頭辞を調整しようとしました。しかし、私はまだこれを正しく理解していないと感じています。誰も私のためにlaymansの言葉でこれを説明できますか？

1 - Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

私はerrornousコードがあると考えているところです。

// Google Map Element 
    var mapElement = document.getElementById('map'); 

    // I added thes lines to try and solve the prefix error. 
    if (mapElement.requestFullscreen) { 
     mapElement.requestFullscreen(); 
    }

EDIT：

わかりましたので、少しトラブルが試行錯誤の日々のカップルになっています。私はこの問題を回避しようとするにはいくつかの異なることを試しましたが、何がうまくいかないのか十分に理解できていません。

エラーログを更新するだけです。

1 - TypeError: google is undefined p-apollo:32:5

2 - Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API controls.js:23:54

3 - "Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error" js:32:350

4 - "Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:222:12

5 - "Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" util.js:222:12

注：私は、生成され、院生いる 私はローカルで実行しているが、GoogleからAPIキーを捧げた。私はこれをコメントし、その場所に以下を追加しました。別の答えで述べたようにAPIのリリースバージョンを追加しようとしました。

<!-- Google Maps API --> 
    <script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script>

完全なコードチャンク

ちょうど私が私のGoogleマップのための場所で私が持っているコードのチャンクを追加したすべての拠点をカバーします。もし何かがそれをスキャンして、私はnoobエラーをしていないことを確認することができます、私はそれを感謝し、時には目の第二セットは解決策です。

でテスト

<!-- Google Maps Script --> 
    <script type="text/javascript"> 

    // create google map on doc load 
    google.maps.event.addDomListener(window, 'load', init); 

    function init() { 

     var mapOptions = { 
      zoom: 11, 
      // The latitude and longitude to center the map (always required) 
      center: new google.maps.LatLng(40.6700, -73.9400), 

      styles: [{ 
       "featureType": "landscape", 
       "stylers": [{ 
        "hue": "#FFBB00" 
       }, { 
        "saturation": 43.400000000000006 
       }, { 
        "lightness": 37.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.highway", 
       "stylers": [{ 
        "hue": "#FFC200" 
       }, { 
        "saturation": -61.8 
       }, { 
        "lightness": 45.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.arterial", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 51.19999999999999 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.local", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 52 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "water", 
       "stylers": [{ 
        "hue": "#0078FF" 
       }, { 
        "saturation": -13.200000000000003 
       }, { 
        "lightness": 2.4000000000000057 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "poi", 
       "stylers": [{ 
        "hue": "#00FF6A" 
       }, { 
        "saturation": -1.0989010989011234 
       }, { 
        "lightness": 11.200000000000017 
       }, { 
        "gamma": 1 
       }] 
      }] 
     }; 

     // Google Map Element 
     var mapElement = document.getElementById('map'); 
      if (mapElement.requestFullscreen) { 
       mapElement.requestFullscreen(); 
      } 

     var map = new google.maps.Map(mapElement, mapOptions); 

     // Map Marker 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(40.6700, -73.9400), 
      map: map, 
      title: 'title' 
     }); 
    } 
    </script>

： - Firefoxの47.0 - クローム51.0.2704.103

出典

2016-07-19 Beaniie

、あなたがそのようなファイルか何かの異なるバージョンを使用していないことを確認していますか？ – gcampbell

私が知っているわけではありませんが、ちょっと上手くいってリフレッシュすると、1秒間動作してエラーをスローします。私はxamppを通してテストしています。 – Beaniie

あなたはどのブラウザを使用していますか？ – gcampbell

私は、彼らが問題に言及しているために、すべてのポイントに答え、と結論しようとするつもりです実施例。

最初に遭遇する警告はPrefixed Fullscreen API is deprecatedです。

ブラウザベンダーは、実験的または非標準的なAPIにプレフィックスを追加することがあります。開発者はブラウザの動作を変更しても、標準プロセス中にコードが破損することはありません。例えば、関数getExperimentalFeatureを想像してみてください。一部のブラウザでは、getExperimentalFeature();でネイティブに呼び出すことができますが、一部のブラウザで接頭辞を決めることができるので、Webkitエンジンを使用するChromeでwebkitGetExperimentalFeature();を使用する必要があります。Microsoft IEではmsGetExperimentalFeature();などが必要です

コードでは、ブラウザに応じて適切な関数呼び出しを使用する必要があります。これは、Fullscreen APIで起こり、this tableで説明されています。一部のブラウザではrequestFullscreen()を使用する必要がありますが、WebkitブラウザではwebkitRequestFullscreen()を使用する必要があります。

だから、私たちはあなたのコードを取ると、フルスクリーンモードで入力する唯一の目標と機能でそれを置けば、私たちのようなものを使用します：

function enterFullscreen() { 
    var element = document.documentElement; 

    if (element.requestFullscreen) { 
    element.requestFullscreen(); 
    } else if (element.msRequestFullscreen) { 
    element.msRequestFullscreen(); 
    } else if (element.mozRequestFullScreen) { 
    element.mozRequestFullScreen(); 
    } else if (element.webkitRequestFullscreen) { 
    element.webkitRequestFullscreen(); 
    } 
}

我々は、我々が使用できるかどうかをチェックすることによって開始しているが接頭辞付きでないメソッドは、そうでなければ、私たちが使用できる接頭辞を見つけるまで、利用可能なすべての接頭辞をテストし続けます。

残念ながら、Firefoxのようなブラウザで警告が表示されなくなることはありません。 control.jsファイルのGoogle API自体は、修正前のバージョンをテストせずにFullscreen APIを使用しています。幸いにも、それは警告だけでjavascriptエラーではないので、Googleが問題を解決するまで無視することができます。

フルスクリーンAPIに関する情報を追加するには、コード内にフルスクリーンモードを自動的に開始しようとしているようです。セキュリティ上の理由からフルスクリーンAPIを使用してウェブサイトをフルスクリーンモードで表示することはできません。 Fullscreen APIを使用する唯一の方法は、ユーザーがボタンをクリックするなどのユーザー操作を使用してAPIを決定した場合にのみ有効にすることです。あなたがフルスクリーンモードを強制しようとする場合は、あなたが期待されている次のエラー得られます

：

は「要素」オン「requestFullScreen」の実行に失敗しました：APIは、ユーザーのジェスチャーによって開始することができます。

この問題に関する詳細はthis questionにあります。

次のエラーはTypeError: google is undefined p-apollo:32:5です。

google.maps.event.addDomListener(window, 'load', init);

「マップがロードされたら、私のinit関数を実行しています」と言います。このコードはブラウザでできるだけ早く実行されますが、現時点では<script>タグをロードしているリモートGoogle APIは読み込まれません。したがって、この時点でオブジェクトgoogleは定義されていません。 Google APIが完全に読み込まれるまで使用することはできません。このエラーを回避するには、APIを読み込むために使用しているURLにcallbackパラメータを指定します。このパラメータを使用して、「APIが読み込まれたらこの関数を実行します。たとえば、以下のURLで、私はAPIがロードされたときに実行するコールバックとしてごinit関数を定義しています：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" type="text/javascript"></script>

次のエラーがGoogle Maps API error: MissingKeyMapErrorであり、あなたが言ったことに関連している：

私はGoogleからAPIキーを生成して含めましたが、ローカルで実行しています。私はこれをコメントし、その場所に以下を追加しました。

ローカルで実行している場合でも、APIキーを指定する必要があります。 the documentation regarding authenticationに記載されているとおり、すべてのGoogle Maps JavaScript APIアプリケーションでは認証が必要です。

APIキーをお持ちでない場合は、Google API Consoleにアクセスし、プロジェクトを作成または選択してAPIと関連サービスを有効にする必要があります。あなたのAPIキーを持っている場合は、あなたが持つAPIをロードするために使用しているURLに含めることができkeyパラメータのように：あなたのmapOptionsは、この時点では、への唯一の罰金のようです

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" type="text/javascript"></script>

あなたのコードはフルスクリーンモードに関連して削除され、関数にラップされ、例えばボタンのようなユーザーのやりとりの後にのみ呼び出されます。

以下の完全な動作例を示しましたが、実際に正しいAPIキーに変更するだけです。変更する必要があるのはYOUR_API_KEYです。その後、フルスクリーンモードを起動するためのマップとボタンが表示されます。それが正常に機能しなければならない

<html> 
    <head> 
    <style> 
     body { 
     margin: 0; 
     } 

     button { 
     margin: 10px; 
     } 

     #map { 
     width: 100%; 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 

    <button id="fullscreen" onClick='enterFullscreen();'>Go fullscreen</button> 
    <div id="map"></div> 

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" 
    type="text/javascript"></script> 
    <script> 
     function init() { 
     var mapOptions = { 
      zoom: 11, 

      center: new google.maps.LatLng(40.6700, -73.9400), 

      styles: [{ 
       "featureType": "landscape", 
       "stylers": [{ 
        "hue": "#FFBB00" 
       }, { 
        "saturation": 43.400000000000006 
       }, { 
        "lightness": 37.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.highway", 
       "stylers": [{ 
        "hue": "#FFC200" 
       }, { 
        "saturation": -61.8 
       }, { 
        "lightness": 45.599999999999994 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.arterial", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 51.19999999999999 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "road.local", 
       "stylers": [{ 
        "hue": "#FF0300" 
       }, { 
        "saturation": -100 
       }, { 
        "lightness": 52 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "water", 
       "stylers": [{ 
        "hue": "#0078FF" 
       }, { 
        "saturation": -13.200000000000003 
       }, { 
        "lightness": 2.4000000000000057 
       }, { 
        "gamma": 1 
       }] 
      }, { 
       "featureType": "poi", 
       "stylers": [{ 
        "hue": "#00FF6A" 
       }, { 
        "saturation": -1.0989010989011234 
       }, { 
        "lightness": 11.200000000000017 
       }, { 
        "gamma": 1 
       }] 
      }] 
     }; 

     var mapElement = document.getElementById('map'); 

     var map = new google.maps.Map(mapElement, mapOptions); 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(40.6700, -73.9400), 
      map: map, 
      title: 'title' 
     }); 
     } 

     function enterFullscreen() { 
     var element = document.documentElement; 

     if (element.requestFullscreen) { 
      element.requestFullscreen(); 
     } else if (element.msRequestFullscreen) { 
      element.msRequestFullscreen(); 
     } else if (element.mozRequestFullScreen) { 
      element.mozRequestFullScreen(); 
     } else if (element.webkitRequestFullscreen) { 
      element.webkitRequestFullscreen(); 
     } 
     } 
    </script> 
    </body> 
</html>

出典

2016-07-21 21:21:17 HiDeo

私の質問には美しい答えがありました。ローディングの問題だけでなく、ジェスチャーなしでフルスクリーンに行くことができないとは思いませんでした。これを詳細に説明し、例を挙げていただきありがとうございます。私はまだコミュニティから見たベスト回答。 :)固定する時間。 – Beaniie

Googleマップ実装の問題とAPI接頭辞エラー

答えて

関連する問題