在面板内添加div元素？ [英] Adding a div element inside a panel?

问题描述

我正在使用GWT，并且正在尝试将谷歌地图添加到我的网站。
因为我想使用谷歌地图V3我使用JSNI。
为了在我的网站上显示地图，我需要创建一个id =map的div元素，并将其放入地图的初始化函数中。我这样做了，它运行良好，但它在网页上的位置很有趣，我希望它被附加到我在代码中创建的面板上。
所以我的问题是我该怎么做呢？
我可以以某种方式在面板内创建一个div，使用GWT吗？

我试着创建一个像这样的新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）; // 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）; 
返回地图; 
 
}  -  * /; 
  

（它弹出提示 - MapDiv为空！）

有什么想法？
谢谢

解决方案

您需要确保 initializeMap（）在加载时调用，以验证DOM元素是否可访问。

尝试并刷新您的方法并使用另一种技术创建地图面板：

1. 扩展 Widget 以定义将用于Google地图容器的自定义小部件： / p>
   
   

   public class MapPanel extends Widget {

private Element container;

public MapPanel（）{

container = DOM.createDiv（）;
container.setId（map）;

//这是Widget API定义底层元素所需的
setElement（container）;


@Override
protected void onLoad（）{
super.onLoad（）;

initializeMap（）;



code $ <$ $ $ <$>


2. 调用初始化：

     runsPanel.add（新的MapPanel（））; 
     




还有其他问题，如 id 属性，在JSNI方法中强制编码并强制重复代码，以及 initializeMap（）的正确位置，以及是否为JSNI图层创建覆盖类型，但这不在此范围内。

参考文献：

• GWT发布Widget最佳做法


• Google开发人员参考Overlay类型

I'm working with GWT and I'm trying to add google-maps to my website. Since I want to use google-maps V3 I'm using JSNI. In order to display the map in my website I need to create a div element with id="map" and get it in the initialization function of the map. I did so, and it worked out fine but its location on the webpage is funny and I want it to be attached to a panel I'm creating in my code. So my question is how can I do it? Can I create a div somehow with GWT inside a panel ?

I've tried to do create a new HTMLPanel like this:

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

Where runsPanel is a the panel I want to to be attached to. Yet, it fails to retrive the div when I use the following initialization function:

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;

}-*/;

(It pops the alert - "MapDiv is null!")

Any ideas? Thanks

解决方案

You need to make sure initializeMap() is called on load, to verify the DOM element is accessible.

Try and refresh your approach and use another technique to create the maps panel:

1. Extend Widget to define a custom widget that will be used for the Google Maps container:

   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. Invoke initialization:

   runsPanel.add(new MapPanel());
   

There are other issues, like the id attribute, hard-coded in the JSNI method and forcing duplication of code, and the proper location for initializeMap() and whether to create an overlay type for the JSNI layer, but that's outside the scope here.

References:

• GWT post on Widget best practices
• Google developers reference on Overlay types

这篇关于在面板内添加div元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！