想要实现的是: 新增、修改窗口的坐标输入框每次鼠标点击弹出一个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窗口的方式可行,经再三尝试,爷弄成功了!

 首先,

  1.                             xtype:'triggerfield'
  2.                             name:'poilocate'
  3.                             id:'locate'
  4.                             fieldLabel:'坐标'
  5.                             labelAlign: 'right'
  6.                             labelWidth: 80, 
  7.                             width:260, 
  8.                             allowBlank: false
  9.                             onTriggerClick: function(){ 
  10.                                 if(!window.maplet)//没有初始化过地图标注窗口 
  11.                                     Ext.create('MyApp.views.map.MapmarkWindow').show(); 
  12.                                 else 
  13.                                     Ext.getCmp('MapmarkWindow').show(); 
  14.                             }, 
  15.                             selectOnFocus: true 
  16.                         }, 

MapmarkWindow.js

  1. Ext.define('MyApp.views.map.MapmarkWindow', { 
  2.     extend: 'Ext.window.Window'
  3.  
  4.     id:'MapmarkWindow'
  5.     draggable: true
  6.     height: 500, 
  7.     width:  700, 
  8.     resizable: false
  9.     layout:  'fit'
  10.     bodyStyle: 'padding:5px;'
  11.     closeAction: 'hide'
  12.     title: '标注点'
  13.     modal: true
  14.     plain: true
  15.     html:"<div id='mapbar' style='width:700px;height:500px'></div>",//或form形式也可以 
  16. //    items: [ 
  17. //              { 
  18. //                  id:"mapbar", 
  19. //                  xtype:'form', 
  20. //                } 
  21. //            ] 
  22.     listeners : { 
  23.         scope : this
  24.         'show' : function() { 
  25.             var latlon = Ext.getCmp('locate').getValue();//输入框的坐标值 
  26.             if(maplet==null){//没有初始化过地图 
  27.                 maplet = new Maplet("mapbar"); 
  28.                 maplet.addControl(new MStandardControl()); 
  29.                 maplet.centerAndZoom(new MPoint(116.38672,39.90805),11); 
  30.                 getpoint(); 
  31.             }else
  32.         //      Ext.getCmp('mapbar').show(); 
  33.                 document.getElementById('mapbar').style.display="block"; //至关重要,要把隐藏的这个节点也显示了。否则窗口显示了地图层还是不显示
  34.                 if(latlon==""
  35.                     getpoint(); 
  36.                 else{//修改标注地点 
  37.                     maplet.centerAndZoom(new MPoint(latlon),11); 
  38.                     maplet.setMode("pan");   
  39.                     overlayEdit = addEditPoint(latlon); 
  40.                 } 
  41.             } 
  42.         }, 
  43.         'hide' : function(cmp) { 
  44.             if (window.maplet) { 
  45.                 window.maplet.clearOverlays(true); 
  46.             } 
  47.             Ext.getCmp('MapmarkWindow').hide(); 
  48.         //  Ext.getCmp('mapbar').hide(); 
  49.             document.getElementById('mapbar').style.display="none"; //至关重要,要把这个节点也隐藏了,否则窗口关闭了地图层还显示
  50.         } 
  51.     } 
  52. }); 
  53.  
  54. //设置地图监听 
  55. function getpoint(){ 
  56.     maplet.setCursorIcon(photo); 
  57.     MEvent.addListener(maplet,"bookmark",bookmark_done);  
  58.     maplet.setMode("bookmark"); 
  59.     MEvent.addListener(maplet, "edit"function(thismaplet){ 
  60.             thismaplet.setEditable(true);  
  61.     }); 
  62.  
  63. //标注触发 
  64. function bookmark_done(data) { 
  65.     var point = data.point.getPid(); 
  66.     maplet.setMode("pan");   
  67.     overlayEdit = addEditPoint(point); 
  68.  
  69. //添加可编辑的标注点 
  70. function addEditPoint(latlon) { // 创建标注点。不居中,有标签,可以移动。] 
  71.     var point = new MPoint(latlon); // 定义标注点坐标中心。 
  72.     var icon = new MIcon(photo, 20, 30,10,29); // 定义标注点图标文件。 
  73.     var infowindow = new MInfoWindow("确认标注", content);     
  74.     var marker = new MMarker(point, icon,infowindow); // 创建一个标注点对象实例。 
  75.     marker.setEditable(true); 
  76.     maplet.addOverlay(marker); // 将标注点添加到地图表面。 
  77.     MEvent.addListener(marker, "click"function(thismarker) {   
  78.           thismarker.openInfoWindow(); 
  79.     }); 
  80.     MEvent.addListener(marker, "drag"function(thismarker) {   
  81.           thismarker.openInfoWindow(); 
  82.     });  
  83.     MEvent.addListener(marker, "mouseout"function(thismarker) {   
  84.           thismarker.openInfoWindow(); 
  85.     });  
  86.     MEvent.addListener(marker, "mouseover"function(thismarker) {   
  87.           thismarker.openInfoWindow(); 
  88.     }); 
  89.     return marker; 

全局变量和方法:

  1. //地图标注全局变量 
  2. var overlayEdit = null
  3. var maplet = null
  4. var photo ="../images/houtai/green.gif"
  5. var content ="<div style='width:80px;height:40px'><center>" + 
  6.         "<button type='button' onclick='savePoi();'>确定</button>" + 
  7.         "</center></div>"
  8.  
  9. //关闭地图标注窗口,获取坐标 
  10. function savePoi(){ 
  11.     var point = overlayEdit.pt.getPid(); 
  12.     Ext.getCmp('locate').setValue(point); 
  13.     if (window.maplet) { 
  14.         window.maplet.clearOverlays(true); 
  15.     } 
  16.     Ext.getCmp('MapmarkWindow').hide(); 
  17. //  Ext.getCmp('mapbar').hide(); 
  18.     document.getElementById('mapbar').style.display="none"

 

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

 

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