Extjs4弹出Mapbar地图标注问题  这篇里提到的解决方法最终也不成功，不能支持其他页面再弹出此地图标注窗口。

最终的解决方法是，取消地图弹出窗口，直接放在增加、修改窗口里。

Extjs4弹出Mapbar地图标注问题——最终解决版_mapbar

 

  1. Ext.define('MyApp.views.UserinfoAddWindow', { 
  2.     extend: 'Ext.window.Window', 
  3.  
  4.     draggable: true, 
  5.     height: 650, 
  6.     width:  950, 
  7.     resizable: false, 
  8.     layout:  'fit', 
  9.     bodyStyle: 'padding:5px;', 
  10.     closeAction: 'destroy', 
  11.     title: '都联网用户信息->增加', 
  12.     modal: true, 
  13.     plain: true, 
  14.      
  15.     initComponent: function() { 
  16.         var me = this; 
  17.  
  18.         Ext.applyIf(me, { 
  19.             items: [{ 
  20.                 xtype:'form', 
  21.                 id:'mainpanel', 
  22.                 frame:true, 
  23.                 layout:'border', 
  24.                 items: [ 
  25.                 { 
  26.                     labelAlign:'right', 
  27.                     buttonAlign:'right', 
  28.                     frame:true, 
  29.                     region:'center', 
  30.                     height: 580, 
  31.                     width:  310, 
  32.                     xtype: 'form', 
  33.                     id:'UserinfoAddForm', 
  34.                     items: [ 
  35.                              { 
  36.                                 xtype: 'textfield', 
  37.                                 name: 'userid', 
  38.                                 fieldLabel: '用户ID', 
  39.                                 labelWidth: 80, 
  40.                                 width:260, 
  41.                                 allowBlank: false, 
  42.                                 emptyText: '请输入', 
  43.                                 maxLength: 40, 
  44.                                 maxLengthText: '最多输入40个字符', 
  45.                                 margin: '5 0 5 10',//上右下左 
  46.                                 selectOnFocus: true 
  47.                             }, 
  48.                             { 
  49.                                 xtype: 'textfield', 
  50.                                 name: 'username', 
  51.                                 fieldLabel: '用户名', 
  52.                                 emptyText: '请输入', 
  53.                                 labelWidth: 80, 
  54.                                 width:260, 
  55.                                 maxLength: 60, 
  56.                                 maxLengthText: '最多输入60个字符', 
  57.                                 margin: '5 0 5 10',//上右下左 
  58.                                 selectOnFocus: true 
  59.                             }, 
  60.                             { 
  61.                                 xtype: 'textfield', 
  62.                                 name: 'userpw', 
  63.                                 id:'userpw', 
  64.                                 fieldLabel: '登录密码', 
  65.                                 inputType:'password', 
  66.                                 labelWidth: 80, 
  67.                                 width:260, 
  68.                                 allowBlank: false, 
  69.                                 emptyText: '请输入', 
  70.                                 maxLength: 50, 
  71.                                 maxLengthText: '最多输入50个字符', 
  72.                                 margin: '5 0 5 10',//上右下左 
  73.                                 selectOnFocus: true 
  74.                             }, 
  75.                             { 
  76.                                 xtype: 'textfield', 
  77.                                 name: 'pw', 
  78.                                 fieldLabel: '密码确认', 
  79.                                 inputType:'password', 
  80.                                 labelWidth: 80, 
  81.                                 width:260, 
  82.                                 allowBlank: false, 
  83.                                 margin: '5 0 5 10',//上右下左 
  84.                                 validator:function(value){ 
  85.                                     var lastvalue = Ext.getCmp('userpw').getValue(); 
  86.                                     if(value===lastvalue) 
  87.                                         return true; 
  88.                                     else 
  89.                                         return '两次输入的密码不一致'; 
  90.                                 }, 
  91.                                 invalidText:'两次输入的密码不一致', 
  92.                                 selectOnFocus: true 
  93.                             }, 
  94.                             { 
  95.                                 xtype: 'numberfield', 
  96.                                 name: 'userphone', 
  97.                                 fieldLabel: '手机号', 
  98.                                 regex:/^(1(3|5|8)[0-9])\d{8}$/, 
  99.                                 regexText:'格式错误',//验证错误之后的提示信息, 
  100.                                 labelWidth: 80, 
  101.                                 width:260, 
  102.                                 allowBlank: false, 
  103.                                 emptyText: '请输入', 
  104.                                 margin: '5 0 5 10',//上右下左 
  105.                                 selectOnFocus: true 
  106.                             }, 
  107.                             { 
  108.                                 xtype: 'textfield', 
  109.                                 name: 'useremail', 
  110.                                 fieldLabel: '邮箱', 
  111.                                 vtype:'email', 
  112.                                 labelWidth: 80, 
  113.                                 width:260, 
  114.                                 allowBlank: false, 
  115.                                 emptyText: '请输入', 
  116.                                 maxLength: 30, 
  117.                                 maxLengthText: '最多输入30个字符', 
  118.                                 margin: '5 0 5 10',//上右下左 
  119.                                 selectOnFocus: true 
  120.                             }, 
  121.                             { 
  122.                                 xtype: 'textfield', 
  123.                                 name: 'useraddr', 
  124.                                 fieldLabel: '用户地址', 
  125.                                 labelWidth: 80, 
  126.                                 width:260, 
  127.                                 allowBlank: false, 
  128.                                 emptyText: '请输入', 
  129.                                 maxLength: 100, 
  130.                                 maxLengthText: '最多输入100个字符', 
  131.                                 margin: '5 0 5 10',//上右下左 
  132.                                 selectOnFocus: true 
  133.                             }, 
  134.                             { 
  135.                                 xtype:'UsertypeCombo', 
  136.                                 id:'usertype', 
  137.                                 fieldLabel: '用户类型', 
  138.                                 labelWidth: 80, 
  139.                                 width:260, 
  140.                                 allowBlank: false, 
  141.                                 margin: '5 0 5 10',//上右下左 
  142.                                 selectOnFocus: true, 
  143.                                 listeners:{ 
  144.                                     select:function(field, value, options){ 
  145.                                         if(field.getRawValue()=="企业子用户"){ 
  146.                                             Ext.getCmp('parentuserid').show(); 
  147.                                         }else 
  148.                                             Ext.getCmp('parentuserid').hide(); 
  149.                                     } 
  150.                                 } 
  151.                             }, 
  152.                             { 
  153.                                 xtype:'EnterpriseuserCombo', 
  154.                                 id:'parentuserid', 
  155.                                 name:'parentuserid', 
  156.                                 fieldLabel:'所属企业账户', 
  157.                                 labelWidth: 80, 
  158.                                 width:260, 
  159.                                 hidden:true, 
  160.                                 margin: '5 0 5 10',//上右下左 
  161.                                 selectOnFocus: true 
  162.                             }, 
  163.                             { 
  164.                                 xtype:'numberfield', 
  165.                                 fieldLabel:'积分', 
  166.                                 name:'usermark', 
  167.                                 value:'0', 
  168.                                 labelWidth: 80, 
  169.                                 width:260, 
  170.                                 allowBlank: false, 
  171.                                 margin: '5 0 5 10',//上右下左 
  172.                                 selectOnFocus: true 
  173.                              }, 
  174.                              { 
  175.                                 xtype:'UserlevelCombo', 
  176.                                 fieldLabel:'等级', 
  177.                                 name:'userlevel', 
  178.                                 labelWidth: 80, 
  179.                                 width:260, 
  180.                                 allowBlank: false, 
  181.                                 margin: '5 0 5 10',//上右下左 
  182.                                 selectOnFocus: true 
  183.                             }, 
  184.                             { 
  185.                                 xtype:'label', 
  186.                                 text:"设置地图中心位置，请移动右侧地图的绿×××标！", 
  187.                                 style:'font-size:12px;color:red', 
  188.                                 width:260, 
  189.                                 margin: '5 0 5 10'//上右下左 
  190.                             }, 
  191.                             { 
  192.                                 xtype:'textfield', 
  193.                                 name:'mapcenter', 
  194.                                 id:'location', 
  195.                                 fieldLabel:'地图中心位置', 
  196.     //                          emptyText:'请点击右边箭头', 
  197.                                 labelWidth: 80, 
  198.                                 width:260, 
  199.                                 margin: '5 0 5 10',//上右下左 
  200.                                 selectOnFocus: true, 
  201.                                 value:'116.38691,39.90771' 
  202.                             }, 
  203.                             { 
  204.                                 xtype:'YesOrNoCombo', 
  205.                                 id:'showinterest', 
  206.                                 name: 'showinterest', 
  207.                                 fieldLabel: '显示兴趣点', 
  208.                                 value:'1', 
  209.                                 labelWidth: 80, 
  210.                                 width:260, 
  211.                                 allowBlank: false, 
  212.                                 margin: '5 0 5 10',//上右下左 
  213.                                 selectOnFocus: true 
  214.                             }, 
  215.                             { 
  216.                                 xtype:'YesOrNoCombo', 
  217.                                 id:'showarea', 
  218.                                 name: 'showarea', 
  219.                                 fieldLabel: '显示区域', 
  220.                                 value:'1', 
  221.                                 labelWidth: 80, 
  222.                                 width:260, 
  223.                                 allowBlank: false, 
  224.                                 margin: '5 0 5 10',//上右下左 
  225.                                 selectOnFocus: true 
  226.                             }, 
  227.                             { 
  228.                                 xtype:'YesOrNoCombo', 
  229.                                 id:'showroute', 
  230.                                 name: 'showroute', 
  231.                                 fieldLabel: '显示路线', 
  232.                                 value:'1', 
  233.                                 labelWidth: 80, 
  234.                                 width:260, 
  235.                                 allowBlank: false, 
  236.                                 margin: '5 0 5 10',//上右下左 
  237.                                 selectOnFocus: true 
  238.                             }, 
  239.     //                      { 
  240.     //                          xtype:'numberfield', 
  241.     //                          fieldLabel:'余额', 
  242.     //                          name:'balance', 
  243.     //                          value:'0', 
  244.     //                          labelWidth: 80, 
  245.     //                          width:260, 
  246.     //                          allowBlank: false, 
  247.     //                          selectOnFocus: true 
  248.     //                       }, 
  249.                             { 
  250.                                 xtype: 'textareafield', 
  251.                                 name:'otherinfo', 
  252.                                 fieldLabel: '备注信息', 
  253.                                 labelWidth: 80, 
  254.                                 width:260, 
  255.                                 maxLength: 50, 
  256.                                 margin: '5 0 5 10',//上右下左 
  257.                                 selectOnFocus: true 
  258.                             }], 
  259.                             buttons: [ 
  260.                             { 
  261.                                 text: '保存', 
  262.                                 type: 'submit', 
  263.                                 handler: function() { 
  264.                                     var form = Ext.getCmp('UserinfoAddForm').getForm(); 
  265.                                     var usertype = Ext.getCmp('usertype').getRawValue(); 
  266.                                     if (form.isValid()) { 
  267.                                         form.submit({ 
  268.                                             url: 'userinfo!add', 
  269.                                             method: 'post', 
  270.                                             params:{usertype:usertype}, 
  271.                                             submitEmptyText: false, 
  272.                                             waitMsg: '保存中，请稍后...', 
  273.                                             success: function(form, action) { 
  274.                                                 if(action.result.message==1){ 
  275.                                                     Ext.Msg.alert('信息提示',"增加成功!"); 
  276.                                                     me.destroy(); 
  277.                                                     var store = Ext.getCmp("UserinfoGridPanel").getStore(); 
  278.                                                     store.load(); 
  279.                                                 }else 
  280.                                                     Ext.Msg.alert('信息提示',action.result.message); 
  281.                                             }, 
  282.                                             failure: function(form, action) { 
  283.                                                 Ext.Msg.alert("信息提示", " 连接服务器出现错误,请稍后再试！"); 
  284.                                             } 
  285.                                         }) 
  286.                                     } 
  287.                                 } 
  288.                             }, 
  289.                             { 
  290.                                 text: '清空', 
  291.                                 handler: function(){   
  292.                                       Ext.getCmp('UserinfoAddForm').getForm().reset(); 
  293.                                 } 
  294.                             }, 
  295.                             { 
  296.                                 text: '关闭', 
  297.                                 handler: function(){   
  298.                                       me.destroy(); 
  299.                                  } 
  300.                             }] 
  301.                          
  302.                     }, 
  303.                     { 
  304.                         xtype:'form', 
  305.                         id:'UserinfoAddMapmark', 
  306.                         region:'east', 
  307.                         width:600, 
  308.                         html:"<iframe name='createMapMark' id='createMapMark' src='../houtai/MapMark.jsp' style='width:600px;height:650px;border:0px;'></iframe>" 
  309.                     }] 
  310.             }] 
  311.         }); 
  312.         me.callParent(arguments); 
  313.     } 
  314. }); 

 

Mapmark.jsp

  1. <%@ page language="java" pageEncoding="UTF-8"%> 
  2. <html> 
  3.   <head> 
  4.     <title>地图标注页面</title> 
  5.      
  6.     <script type="text/javascript" src="../utils/mapbarapi41.2.js"></script> 
  7.     <!-- <script type="text/javascript" src="http://api.mapbar.com/api/mapbarapi.js"></script> --> 
  8.     <script type="text/javascript"> 
  9.       var maplet = null; 
  10.       function initMap() { 
  11.         var pointtt=window.parent.document.getElementById("location-inputEl").value; 
  12.         if(""==pointtt||null==pointtt){ 
  13.             maplet = new Maplet("mapbar"); 
  14.             maplet.centerAndZoom("116.35204,39.97912",9); 
  15.             maplet.addControl(new MStandardControl()); 
  16.             maplet.showOverview(true); 
  17.             marker=addEditPoint("116.35204,39.97912"); 
  18.         } 
  19.         else{ 
  20.             maplet = new Maplet("mapbar"); 
  21.             maplet.centerAndZoom(pointtt,9); 
  22.             maplet.addControl(new MStandardControl()); 
  23.             maplet.showOverview(true); 
  24.             marker=addEditPoint(pointtt); 
  25.         } 
  26.         MEvent.addListener(maplet, "edit", dragEnd);   
  27.       } 
  28.      function dragEnd(overlay) { 
  29.         window.parent.document.getElementById("location-inputEl").value = overlay.pt.pid; 
  30.      } 
  31.      //添加可编辑的标注点 
  32.      function addEditPoint(latlon) { // 创建标注点。不居中，有标签，可以移动。] 
  33.         var point = new MPoint(latlon); // 定义标注点坐标中心。 
  34.         var icon = new MIcon("../p_w_picpaths/houtai/green.gif", 20, 30,10,29); // 定义标注点图标文件。 
  35.         var marker = new MMarker(point, icon); // 创建一个标注点对象实例。 
  36.         marker.setEditable(true); 
  37.         maplet.addOverlay(marker); // 将标注点添加到地图表面。 
  38.         return marker; 
  39.      } 
  40.     </script> 
  41.   </head> 
  42.  
  43.   <body onload="initMap();" style="padding: 0px; margin: 0px;"> 
  44.     <div id="mapbar" style='width:600px;height:650px'></div> 
  45.   </body> 
  46. </html>