1

私は GWT を使用しており、Google マップを自分の Web サイトに追加しようとしています。google-maps V3 を使用したいので、JSNI を使用しています。私のウェブサイトにマップを表示するには、id="map" で div 要素を作成し、マップの初期化関数で取得する必要があります。私はそうしましたが、うまくいきましたが、Webページ上の場所がおかしいので、コードで作成しているパネルに接続したいです。だから私の質問はどうすればそれを行うことができますか? パネル内で GWT を使用して何らかの方法で div を作成できますか?

次のような新しい HTMLPanel を作成しようとしました。

runsPanel.add(new HTMLPanel("<div id=\"map\"></div>"));

runsPanel は、接続したいパネルです。それでも、次の初期化関数を使用すると、div を取得できません。

private native JavaScriptObject initializeMap() /*-{

    var latLng = new $wnd.google.maps.LatLng(31.974, 34.813); //around Rishon-LeTsiyon
    var mapOptions = {
        zoom : 14,
        center : latLng,
        mapTypeId : $wnd.google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = $doc.getElementById('map');
    if (mapDiv == null) {
        alert("MapDiv is null!");
    }
    var map = new $wnd.google.maps.Map(mapDiv, mapOptions);
    return map;

}-*/;

(アラートをポップします - 「MapDiv is null!」)

何か案は？ありがとう

4

3 に答える 3

2

initializeMap()DOM 要素にアクセスできることを確認するには、ロード時に が呼び出されることを確認する必要があります。

アプローチを試して更新し、別の手法を使用してマップ パネルを作成します。

  1. 拡張Widgetして、Google マップ コンテナに使用されるカスタム ウィジェットを定義します。

    public class MapPanel extends Widget {

    private Element container;

    public MapPanel() {

        container = DOM.createDiv();
        container.setId("map");

        // this is required by the Widget API to define the underlying element
        setElement(container);
    }

    @Override
    protected void onLoad() {
        super.onLoad();

            initializeMap();
        }
    }
}

  2. 初期化を呼び出します。

    runsPanel.add(new MapPanel());

id属性、JSNI メソッドでのハードコード化、コードの重複の強制、適切な場所、initializeMap()および JSNI レイヤーのオーバーレイ タイプを作成するかどうかなど、他にも問題がありますが、ここでは範囲外です。

参考文献:

于 2012-05-18T11:06:24.083 に答える
1

initializeMap() を呼び出す前に、runsPanel を DOM にアタッチしていれば、コードは正常に動作します。

次の単純な EntryPoint でテストできます。

@Override
public void onModuleLoad() {

  final Panel runsPanel = new ...Panel; /* Use the kind of panel you like */

  runsPanel.add(new HTMLPanel("<div id=\"map\"></div>"));

  RootLayoutPanel.get().add(runsPanel);

  initializeMap();
}

HTMLPanel を runsPanel に追加するだけでは不十分です。runsPanel 自体が DOM にアタッチされていない場合、$doc.getElementById('map')何も見つかりません。

注:何らかの方法で「マップ」div の高さを設定してください。そうしないと、マップが表示されません。

于 2012-05-19T09:12:08.890 に答える
0

UiBinder を使用して物事を簡素化したい場合があります。ここで Hello World の例を参照してください: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder

UiBinder を使用すると、HTML を使用してページをレイアウトする方法と同様に、UI レイアウトの構造を定義する XML を記述できます。ただし、XML はボタンなどのウィジェットを構築できます。さらに、XML 要素に名前を付けて、Java コードで参照し、イベント ハンドラーをそれにバインドすることができます。これはうまく機能し、コードを非常に簡単にします。読む。

さらに、これらの状況では、メソッドを呼び出してウィジェットを作成し、それらを他のウィジェット内に配置するのではなく、UiBinder がネイティブ HTML 要素を作成し、必要に応じてネストすることができます。さらに、ただし、UiBinder のドキュメントによると、UiBinder はブラウザーのネイティブな表現方法を使用することで、より効率的なコードが得られるとされています (上記のリンクから)。

UiBinder は、コードを使用するよりも自然で簡潔な方法で UI を構築できるだけでなく、アプリをより効率的にすることもできます。ブラウザーは、大量の API 呼び出しよりも、HTML の大きな文字列を innerHTML 属性に詰め込むことによって DOM 構造を構築する方が優れています。UiBinder は当然これを利用しており、その結果、アプリを構築するための最も快適な方法は、アプリを構築するための最良の方法でもあります。

この機能により、ブラウザがウィジェットを正しく登録する可能性が高くなり、後で getElementById() によって検出されるようになると思います。

上記のコードは、UiBinder では次のようになります。

<g:HTMLPanel ui:field='my_HTMLPanel'>
  <div ui:field='map_div'>
    <!-- put some HTML here -->
  </div>
</g:HTMLPanel>
于 2012-05-19T08:12:15.427 に答える