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:"<div id='mapbar' style='width:700px;height:500px'></div>",//或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 ="<div style='width:80px;height:40px'><center>" + 
        "<button type='button' onclick='savePoi();'>确定</button>" + 
        "</center></div>"; 
 
//关闭地图标注窗口，获取坐标 
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种方法的尝试就再说吧……