2

Google ジオコーディング API の使用方法を学ぼうとしていますが、最も単純な例でさえマップを作成できないようです。Google で別のチュートリアルを検索しましたが、すべて問題ないようです。

明らかに、私は何かが欠けているに違いありません。これが私がこれまでに持っているものです:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=thisstuffisprivate&sensor=false">
        </script>
        <script>
            var map;
            var mapOptions;
            function initialize() {
                try {
                    document.write("Initialize entered");
                    mapOptions = {
                        center: new google.maps.LatLng(-34.397, 150.644),
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    document.write("<br>Map options created");
                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    document.write("<br>Initialize exited");
                } catch (err) {
                    document.write("<br>Error: " + err.message);
                }
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:500px;height:300px;">
        </div>
    </body>
</html>

これにより、空白のページが生成されます。コンピューターでこのコードを使用し、Firefox で結果を確認していることに注意してください。これはまだ外部サーバーでホストされていません。

私が犯した間違いを理解するのを手伝ってくれる人はいますか? これにより、この API の使用方法を学習し続けることができます。

どうもありがとう !

編集: - 最初と最後に書き込みを追加する小さなテストを行いましたが、initialize()(マップの作成後) 最後の行に達していないように見えるので、どこかで失敗しているに違いありません。それを調べてみます。

  • 幅と高さを考慮するように変更されました。レフティウムのおかげです。

  • さらにテストした後、マップ作成ステップで失敗したようです。

  • このコードは、IE、Firefox、Chrome のいずれのコンピューターでも機能しませんが、他のユーザーでは機能するようです。Windows 8 と、すべてのブラウザーの比較的最近のバージョンを使用しています。Javascript が有効になっており、Windows Defender をオフにしようとしました (念のため..)。まだ空白のページだけです。

  • API キーも使用しましたが、それでも空白のページが生成されます。

  • 上記の更新されたコードに対して次の出力が得られます。

Initialize entered Map options created Error: a is null

  • また、Windows 7 ラップトップで空白のページが生成されるため、Windows 8 との互換性の問題ではありません。
4

4 に答える 4

1

さらにテストしたところ、正確なエラーメッセージと別の SO 質問の解決策が見つかりました。基本的に、問題は div が実際には完全に構築されておらず、initialize() 呼び出しが DOM にある前にこの要素を検索することです (命名法が間違っている場合はご容赦ください)。

解決策は、呼び出しを下に移動して div を作成することです。

Google MAP API Uncaught TypeError: null のプロパティ 'offsetWidth' を読み取れません

于 2013-01-13T01:29:40.037 に答える
1

「map_canvas」の <div> ディメンションを指定する必要があります。

<div id="map_canvas" style="width:500px;height:300px">
于 2013-01-12T17:54:08.733 に答える
1

Google API キーはドメイン名によって割り当てられ、HTTP_REFERERヘッダーを介してチェックされます。ローカル マシンでテストすると、リクエストはキーを登録したライブ ドメインと一致しませんlocalhost(何か言うでしょう)。

  1. http://localhostキーにサインアップして、ローカルホストのテスト中にそれを使用できます。
  2. または -- を偽装しHTTP_REFERERて、自分の Web サイトから送信されたように見せかけることができます。Google ライセンス契約でこの種のスプーフィングが許可されているかどうかはわかりません。
于 2013-01-12T18:34:50.003 に答える
0

API キーの取得が必要になる場合があります。匿名ユーザーが作成できるリクエストの数には制限がある可能性があります。これは、上記の例でマップをロードできる以外のすべての人が理由を説明するでしょう.

script タグを次のように変更する必要があります。

  <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
  </script>

マップ API のロード

于 2013-01-12T18:15:08.030 に答える