Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题解决

 Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题非常不稳定,时好时坏。最终采取了最新的mapbar地图

  
  
  
  
  1. <script type="text/javascript" src="http://api.mapbar.com/api/mapbarapi.js"></script> 

以及控制bubble节点的做法。如下:

 

Userinfo.jsp

  
  
  
  
  1. <%@ page language="java" pageEncoding="UTF-8"%> 
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  4. <html> 
  5.     <head> 
  6.         <title>都联网用户管理</title> 
  7.         <script type="text/javascript" src="../utils/dataStructure.js"></script> 
  8.         <script type="text/javascript" src="js/userinfo.js"></script> 
  9.         <script type="text/javascript"></script> 
  10.         <style type="text/css"> 
  11.             body{ 
  12.                 font-size: 12px; 
  13.             } 
  14.         </style> 
  15.  
  16.     </head> 
  17.     <body> 
  18.         <div id="UserinfoGrid"></div> 
  19.         <div id="mapbarUserinfo" style="height:500px"></div> 
  20.         <div id="usertemp"></div> 
  21.     </body> 
  22. </html> 

userinfo.js

  
  
  
  
  1. Ext.Loader.setConfig({enabled:true}); 
  2. Ext.Loader.setPath('MyApp''../houtai/js'); 
  3. Ext.require(['MyApp.views.UserinfoGridPanel','MyApp.views.YesOrNoCombo','MyApp.views.user.combo.UserlevelCombo'
  4. 'MyApp.views.user.combo.UsertypeCombo','MyApp.views.user.combo.EnterpriseuserCombo']); 
  5.  
  6. //------------------------------------------------------------------------Map 
  7. var maplet=null
  8. //存放当页记录的地图marker的Map集合 
  9. var userMarkerMap = null
  10.  
  11. function initMap() { 
  12.     maplet = new Maplet("mapbarUserinfo"); 
  13.      
  14.     //添加虚假的bubble,来欺骗centerAndZoom方法(第二次加载时会寻找bubble节点) 
  15.     var oP1=document.getElementById("usertemp"); 
  16.     //alert("1:"+document.getElementById("temp").innerHTML); 
  17.     if(document.getElementById("bubble")== null){ 
  18.         var newEle1 = document.createElement("div");// 定义新的元素节点变量 
  19.         newEle1.id ="bubble"
  20.         newEle1.setAttribute("style","display:'';visibility:hidden");  
  21.         oP1.appendChild(newEle1); 
  22.     } 
  23.     //alert("2:"+document.getElementById("temp").innerHTML); 
  24.      
  25.     maplet.width=document.getElementById("UserinfoGrid").offsetWidth; 
  26.     maplet.centerAndZoom(new MPoint("116.35204,39.97912"),11); 
  27.      
  28.     //alert("3:"+document.getElementById("temp").innerHTML); 
  29.     //将虚假的bubble节点移除 
  30.     for (var i=oP1.childNodes.length-1;i>=0;i--) { 
  31.         var childNode = oP1.childNodes[i]; 
  32.         oP1.removeChild(childNode); 
  33.     } 
  34.      
  35.     //alert("4:"+document.getElementById("temp").innerHTML); 
  36.     maplet.addControl(new MStandardControl()); 
  37.     maplet.showOverview(true); 
  38.  } 
  39.      
  40.  
  41. //--------------------------------------------------------------定义全局变量 
  42. var bool=false//判断地图是否初始化成功        
  43. var overlayExit=new Map(); 
  44.  
  45. //是否-字典翻译 
  46. function rendererYesorno(value,metadata,record){  
  47.     var rstore = Ext.data.StoreManager.get('YesOrNoComboStore');  
  48.     var index = rstore.find('Value',value);  
  49.     if(index==-1)  //当store中找不到对应id得时候,index为-1  
  50.         return null;   
  51.     else{   
  52.         var record = rstore.getAt(index).get('Name');    
  53.         return record;    
  54.     } 
  55.  
  56. //用户类型-字典翻译 
  57. function rendererUsertype(value,metadata,record){  
  58.     var rstore = Ext.data.StoreManager.get('UsertypeComboStore');  
  59.     var index = rstore.find('recordid',value);  
  60.     if(index==-1)  //当store中找不到对应id得时候,index为-1  
  61.         return null;   
  62.     else{   
  63.         var record = rstore.getAt(index).get('value');    
  64.         return record;    
  65.     } 
  66.  
  67. //用户级别-字典翻译 
  68. function rendererUserlevel(value,metadata,record){  
  69.     var rstore = Ext.data.StoreManager.get('UserlevelComboStore');  
  70.     var index = rstore.find('recordid',value);  
  71.     if(index==-1)  //当store中找不到对应id得时候,index为-1  
  72.         return null;   
  73.     else{   
  74.         var record = rstore.getAt(index).get('value');    
  75.         return record;    
  76.     } 
  77.  
  78. //取record记录,在地图上加标注点,以及信息窗内容。 
  79. function UserMapMarker(record){ 
  80.     var mapcenter = record.get('mapcenter'); 
  81.     var userid =record.get('userid'); 
  82.     var username = record.get('username'); 
  83.     var usertype = record.get('usertype'); 
  84. //  var sex = record.get('sex'); 
  85.     var userphone = record.get('userphone'); 
  86.     var useremail = record.get('useremail'); 
  87.     var useraddr = record.get('useraddr'); 
  88.     var parentuserid = record.get('parentuserid'); 
  89.     var createtime = record.get('createtime'); 
  90.     var mapcenter = record.get('mapcenter'); 
  91.     var showinterest = record.get('showinterest'); 
  92.     var showarea = record.get('showarea'); 
  93.     var showroute = record.get('showroute'); 
  94.     var logoninfo = record.get('logoninfo'); 
  95.     var usermark = record.get('usermark'); 
  96.     var userlevel = record.get('userlevel'); 
  97.     var modifytime = record.get('modifytime'); 
  98.     var otherinfo = record.get('otherinfo'); 
  99.      
  100.     var title="用户:"+userid; 
  101.     var detail = "<div style='width:370px;height:300px;'>" 
  102.                 +"<table border='0' cellpadding='0' cellspacing='0'>" 
  103.                 +"<tr>" 
  104.                 +"  <td>用户名称:</td>" 
  105.                 +"  <td>"+username+"</td>" 
  106.                 +"</tr>" 
  107. //              +"<tr>" 
  108. //              +"  <td>性别:</td>" 
  109. //              +"  <td>"+sex+"</td>" 
  110. //              +"</tr>" 
  111.                 +"<tr>" 
  112.                 +"  <td>手机号码:</td>" 
  113.                 +"  <td>"+userphone+"</td>" 
  114.                 +"</tr>" 
  115.                 +"<tr>" 
  116.                 +"  <td>邮箱:</td>" 
  117.                 +"  <td>"+useremail+"</td>" 
  118.                 +"</tr>" 
  119.                 +"<tr>" 
  120.                 +"  <td>用户地址:</td>" 
  121.                 +"  <td>"+useraddr+"</td>" 
  122.                 +"</tr>" 
  123.                 +"<tr>" 
  124.                 +"  <td>用户类型:</td>" 
  125.                 +"  <td>"+usertype+"</td>" 
  126.                 +"</tr>" 
  127.                 +"<tr>" 
  128.                 +"  <td>用户等级:</td>" 
  129.                 +"  <td>"+userlevel+"</td>" 
  130.                 +"</tr>" 
  131.                 +"<tr>" 
  132.                 +"  <td>用户积分:</td>" 
  133.                 +"  <td>"+usermark+"</td>" 
  134.                 +"</tr>" 
  135.                 +"<tr>" 
  136.                 +"  <td>注册时间:</td>" 
  137.                 +"  <td>"+createtime+"</td>" 
  138.                 +"</tr>" 
  139.                 +"<tr>" 
  140.                 +"  <td>最近修改时间:</td>" 
  141.                 +"  <td>"+modifytime+"</td>" 
  142.                 +"</tr>" 
  143.                 +"<tr>" 
  144.                 +"  <td>是否显示兴趣点:</td>" 
  145.                 +"  <td>"+showinterest+"</td>" 
  146.                 +"</tr>" 
  147.                 +"<tr>" 
  148.                 +"  <td>是否显示兴趣区域:</td>" 
  149.                 +"  <td>"+showarea+"</td>" 
  150.                 +"</tr>" 
  151.                 +"<tr>" 
  152.                 +"  <td>是否显示兴趣路线:</td>" 
  153.                 +"  <td>"+showroute+"</td>" 
  154.                 +"</tr>" 
  155.                 +"<tr>" 
  156.                 +"  <td>备注:</td>" 
  157.                 +"  <td>"+otherinfo+"</td>" 
  158.                 +"</tr>" 
  159.                 +"</table>" 
  160.                 +"</div>"
  161.     var icon = "../images/houtai/green.gif"
  162.     var marker = addPoint(icon,mapcenter,title,detail); 
  163.     return marker; 
  164. Ext.onReady(function() { 
  165.     initMap(); 
  166.     setTimeout("showGridPanel()",1000); 
  167. });  
  168. function showGridPanel(){ 
  169.     Ext.create('MyApp.views.UserinfoGridPanel').show(); 

 

引入的js文件:

  
  
  
  
  1. function addPoint(icon, latlon, name, detail) { // 创建标注点。不居中,有标签。 
  2.     var point = new MPoint(latlon); // 定义标注点坐标中心。 
  3.     maplet.setCenter(latlon); // 将地图调整为以标注点为中心。 
  4.     var icon = new MIcon(icon, 22, 30); // 定义标注点图标文件。 
  5.     var infoWindow = new MInfoWindow(name, detail); // 定义标注点的气泡信息框。 
  6.     var Mlable = new MLabel(name, 16, -24); // 定义标注点标签名字。 
  7.     var marker = new MMarker(point, icon, infoWindow, Mlable); // 创建一个标注点对象实例。 
  8.     maplet.addOverlay(marker); // 将标注点添加到地图表面。 
  9.     marker.openInfoWindow(); 
  10.      
  11.     //将最后一次打开的bubble复制给隐藏的div 
  12.     if(document.getElementById("bubble")!= null){ 
  13.         var tempinfo=document.getElementById("bubble").cloneNode(true); 
  14.         document.getElementById("hiddenV").appendChild(tempinfo); 
  15.          
  16.         //bubble的关闭button失效,自定义关闭功能 
  17.         var oDiv = document.getElementById("mybubble_CBtn"); 
  18.         oDiv.onclick = function(){ 
  19.              maplet.hideBubble(); 
  20.         } 
  21.     } 
  22.     return marker; 

 

UserinfoGridPanel.js中增加监听,每次关闭了tab时,因为store中数据被缓存了没有重新load,所以监听render grid事件,在地图上添加所有记录的标注点。

点击行记录时,显示标注点的气泡。

  
  
  
  
  1.  listeners:{ 
  2.     render : function(scope){ 
  3.         if(this.store.getCount()>0){ 
  4.         userMarkerMap = new JMap(); 
  5.         if(maplet!=null){ 
  6.             maplet.clearOverlays(true);//清除图层 
  7.         } 
  8.         for(var i=0;i<this.store.getCount();i++){ 
  9.             var mapcenter = this.store.getAt(i).get('mapcenter'); 
  10.             if((null!=mapcenter)&&(""!=mapcenter)){ 
  11.                 var marker = UserMapMarker(this.store.getAt(i)); 
  12.                 userMarkerMap.add(this.store.getAt(i).get('userid'),marker); 
  13.             } 
  14.         } 
  15.     } 
  16.     }, 
  17.     itemclick :function(scope,record){ 
  18.         var mapcenter = record.get('mapcenter'); 
  19.         if(null!=mapcenter&&""!=mapcenter){ 
  20.             maplet.centerAndZoom(new MPoint(mapcenter),11);//经纬度坐标,缩放级别 
  21.             if(userMarkerMap.getValue(record.get('userid'))!=null){ 
  22.                 userMarkerMap.getValue(record.get('userid')).openInfoWindow(); 
  23.             } 
  24.     } 
  25.     else 
  26.         Ext.Msg.alert("提示","此用户没有设置地图中心位置"); 
  27.   } 

 

UserinfoStore.js中也增加监听,每次store加载数据同时在地图上添加所有记录的标注点。

  
  
  
  
  1. load :function(scope, records, operation, success){ 
  2.                 userMarkerMap = new JMap(); 
  3.                 if(maplet!=null){ 
  4.                     maplet.clearOverlays(true);//清除图层 
  5.                 } 
  6.                 for(var i=0;i<records.length;i++){ 
  7.                     var mapcenter = records[i].get('mapcenter'); 
  8.                     if((null!=mapcenter)&&(""!=mapcenter)){ 
  9.                         var marker = UserMapMarker(records[i]); 
  10.                         userMarkerMap.add(records[i].get('userid'),marker); 
  11.                     } 
  12.                 } 
  13.         } 

 

你可能感兴趣的:(tab,extjs4,Bubble,mapbar)