Extjs4弹出Mapbar地图标注问题

想要实现的是： 新增、修改窗口的坐标输入框每次鼠标点击弹出一个Extjs4的地图标注窗口，这个窗口可以标注地点，标注完弹出气泡，气泡中可以点击“确定”按钮，窗口关闭，标注地点的坐标显示在坐标输入框内。

 1、   地图标注窗口中设了个叫mapbar的div，maplet初始化在这个div里面，标注，弹出气泡，点击确定，窗口关闭（destroy），坐标获取成功。第一遍很好用。

   但如果再点击坐标输入框重新create一个地图标注窗口的话，地图就不显示了。因为新窗口的mapbar的div跟上次地图初始化时的maabar Div已经不是同一个dom了。

   而mapbar在一个页面中又只能初始化一次。

失败。

 2、将窗口的关闭改为hide事件。 Ext2中貌似是可以的，但是4中不行，只有窗口隐藏了，地图层还留在页面上。

失败。

 

3、所有把前一个div隐藏，在一个新的div上再初始化maplet的尝试在方向上就是错误的。因为mapbar在一个页面内只能初始化一次。Extjs的窗口只是一个层，而不是一个页面。根本不能再初始化了，即使换了一个div。

失败。

4、只能改变实现思路了，新增、修改窗口的坐标输入框每次鼠标点击打开一个地图标注页面。

节后尝试。

 

 

经再三思量，只有通过hide窗口的方式可行，经再三尝试，爷弄成功了！

 首先，

{
                            xtype:'triggerfield',
                            name:'poilocate',
                            id:'locate',
                            fieldLabel:'坐标',
                            labelAlign: 'right',
                            labelWidth: 80,
                            width:260,
                            allowBlank: false,
                            onTriggerClick: function(){
                                if(!window.maplet)//没有初始化过地图标注窗口
                                    Ext.create('MyApp.views.map.MapmarkWindow').show();
                                else
                                    Ext.getCmp('MapmarkWindow').show();
                            },
                            selectOnFocus: true
                        },

MapmarkWindow.js

Ext.define('MyApp.views.map.MapmarkWindow', {
    extend: 'Ext.window.Window',

    id:'MapmarkWindow',
    draggable: true,
    height: 500,
    width:  700,
    resizable: false,
    layout:  'fit',
    bodyStyle: 'padding:5px;',
    closeAction: 'hide',
    title: '标注点',
    modal: true,
    plain: true,
    html:"

",//或form形式也可以 

//    items: [ 

//              { 

//                  id:"mapbar", 

//                  xtype:'form', 

//                } 

//            ] 

    listeners : { 

        scope : this, 

        'show' : function() { 

            var latlon = Ext.getCmp('locate').getValue();//输入框的坐标值 

            if(maplet==null){//没有初始化过地图 

                maplet = new Maplet("mapbar"); 

                maplet.addControl(new MStandardControl()); 

                maplet.centerAndZoom(new MPoint(116.38672,39.90805),11); 

                getpoint(); 

            }else{ 

        //      Ext.getCmp('mapbar').show(); 

                document.getElementById('mapbar').style.display="block"; //至关重要，要把隐藏的这个节点也显示了。否则窗口显示了地图层还是不显示

                if(latlon=="") 

                    getpoint(); 

                else{//修改标注地点 

                    maplet.centerAndZoom(new MPoint(latlon),11); 

                    maplet.setMode("pan");   

                    overlayEdit = addEditPoint(latlon); 

                } 

            } 

        }, 

        'hide' : function(cmp) { 

            if (window.maplet) { 

                window.maplet.clearOverlays(true); 

            } 

            Ext.getCmp('MapmarkWindow').hide(); 

        //  Ext.getCmp('mapbar').hide(); 

            document.getElementById('mapbar').style.display="none"; //至关重要，要把这个节点也隐藏了，否则窗口关闭了地图层还显示

        } 

    } 

}); 

 

//设置地图监听 

function getpoint(){ 

    maplet.setCursorIcon(photo); 

    MEvent.addListener(maplet,"bookmark",bookmark_done);  

    maplet.setMode("bookmark"); 

    MEvent.addListener(maplet, "edit", function(thismaplet){ 

            thismaplet.setEditable(true);  

    }); 

} 

 

//标注触发 

function bookmark_done(data) { 

    var point = data.point.getPid(); 

    maplet.setMode("pan");   

    overlayEdit = addEditPoint(point); 

} 

 

//添加可编辑的标注点 

function addEditPoint(latlon) { // 创建标注点。不居中，有标签，可以移动。] 

    var point = new MPoint(latlon); // 定义标注点坐标中心。 

    var icon = new MIcon(photo, 20, 30,10,29); // 定义标注点图标文件。 

    var infowindow = new MInfoWindow("确认标注", content);     

    var marker = new MMarker(point, icon,infowindow); // 创建一个标注点对象实例。 

    marker.setEditable(true); 

    maplet.addOverlay(marker); // 将标注点添加到地图表面。 

    MEvent.addListener(marker, "click", function(thismarker) {   

          thismarker.openInfoWindow(); 

    }); 

    MEvent.addListener(marker, "drag", function(thismarker) {   

          thismarker.openInfoWindow(); 

    });  

    MEvent.addListener(marker, "mouseout", function(thismarker) {   

          thismarker.openInfoWindow(); 

    });  

    MEvent.addListener(marker, "mouseover", function(thismarker) {   

          thismarker.openInfoWindow(); 

    }); 

    return marker; 

} 

全局变量和方法：

//地图标注全局变量
var overlayEdit = null;
var maplet = null;
var photo ="../p_w_picpaths/houtai/green.gif";
var content ="" +
        "确定" +
        "

"; 

 

//关闭地图标注窗口，获取坐标 

function savePoi(){ 

    var point = overlayEdit.pt.getPid(); 

    Ext.getCmp('locate').setValue(point); 

    if (window.maplet) { 

        window.maplet.clearOverlays(true); 

    } 

    Ext.getCmp('MapmarkWindow').hide(); 

//  Ext.getCmp('mapbar').hide(); 

    document.getElementById('mapbar').style.display="none"; 

} 

 

不管坐标输入框有没有值，第几次打开窗口标注，都可以正常使用啦~~ 哇哈哈~~

 

那么，第4种方法的尝试就再说吧……