Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题解决
Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题非常不稳定，时好时坏。最终采取了最新的mapbar地图
- <script type="text/javascript" src="http://api.mapbar.com/api/mapbarapi.js"></script>
以及控制bubble节点的做法。如下：
Userinfo.jsp
- <%@ page language="java" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>都联网用户管理</title>
- <script type="text/javascript" src="../utils/dataStructure.js"></script>
- <script type="text/javascript" src="js/userinfo.js"></script>
- <script type="text/javascript"></script>
- <style type="text/css">
- body{
- font-size: 12px;
- }
- </style>
- </head>
- <body>
- <div id="UserinfoGrid"></div>
- <div id="mapbarUserinfo" style="height:500px"></div>
- <div id="usertemp"></div>
- </body>
- </html>
userinfo.js
- Ext.Loader.setConfig({enabled:true});
- Ext.Loader.setPath('MyApp', '../houtai/js');
- Ext.require(['MyApp.views.UserinfoGridPanel','MyApp.views.YesOrNoCombo','MyApp.views.user.combo.UserlevelCombo',
- 'MyApp.views.user.combo.UsertypeCombo','MyApp.views.user.combo.EnterpriseuserCombo']);
- //------------------------------------------------------------------------Map
- var maplet=null;
- //存放当页记录的地图marker的Map集合
- var userMarkerMap = null;
- function initMap() {
- maplet = new Maplet("mapbarUserinfo");
- //添加虚假的bubble，来欺骗centerAndZoom方法(第二次加载时会寻找bubble节点)
- var oP1=document.getElementById("usertemp");
- //alert("1:"+document.getElementById("temp").innerHTML);
- if(document.getElementById("bubble")== null){
- var newEle1 = document.createElement("div");// 定义新的元素节点变量
- newEle1.id ="bubble";
- newEle1.setAttribute("style","display:'';visibility:hidden");
- oP1.appendChild(newEle1);
- }
- //alert("2:"+document.getElementById("temp").innerHTML);
- maplet.width=document.getElementById("UserinfoGrid").offsetWidth;
- maplet.centerAndZoom(new MPoint("116.35204,39.97912"),11);
- //alert("3:"+document.getElementById("temp").innerHTML);
- //将虚假的bubble节点移除
- for (var i=oP1.childNodes.length-1;i>=0;i--) {
- var childNode = oP1.childNodes[i];
- oP1.removeChild(childNode);
- }
- //alert("4:"+document.getElementById("temp").innerHTML);
- maplet.addControl(new MStandardControl());
- maplet.showOverview(true);
- }
- //--------------------------------------------------------------定义全局变量
- var bool=false; //判断地图是否初始化成功
- var overlayExit=new Map();
- //是否-字典翻译
- function rendererYesorno(value,metadata,record){
- var rstore = Ext.data.StoreManager.get('YesOrNoComboStore');
- var index = rstore.find('Value',value);
- if(index==-1) //当store中找不到对应id得时候,index为-1
- return null;
- else{
- var record = rstore.getAt(index).get('Name');
- return record;
- }
- }
- //用户类型-字典翻译
- function rendererUsertype(value,metadata,record){
- var rstore = Ext.data.StoreManager.get('UsertypeComboStore');
- var index = rstore.find('recordid',value);
- if(index==-1) //当store中找不到对应id得时候,index为-1
- return null;
- else{
- var record = rstore.getAt(index).get('value');
- return record;
- }
- }
- //用户级别-字典翻译
- function rendererUserlevel(value,metadata,record){
- var rstore = Ext.data.StoreManager.get('UserlevelComboStore');
- var index = rstore.find('recordid',value);
- if(index==-1) //当store中找不到对应id得时候,index为-1
- return null;
- else{
- var record = rstore.getAt(index).get('value');
- return record;
- }
- }
- //取record记录，在地图上加标注点，以及信息窗内容。
- function UserMapMarker(record){
- var mapcenter = record.get('mapcenter');
- var userid =record.get('userid');
- var username = record.get('username');
- var usertype = record.get('usertype');
- // var sex = record.get('sex');
- var userphone = record.get('userphone');
- var useremail = record.get('useremail');
- var useraddr = record.get('useraddr');
- var parentuserid = record.get('parentuserid');
- var createtime = record.get('createtime');
- var mapcenter = record.get('mapcenter');
- var showinterest = record.get('showinterest');
- var showarea = record.get('showarea');
- var showroute = record.get('showroute');
- var logoninfo = record.get('logoninfo');
- var usermark = record.get('usermark');
- var userlevel = record.get('userlevel');
- var modifytime = record.get('modifytime');
- var otherinfo = record.get('otherinfo');
- var title="用户："+userid;
- var detail = "<div style='width:370px;height:300px;'>"
- +"<table border='0' cellpadding='0' cellspacing='0'>"
- +"<tr>"
- +" <td>用户名称：</td>"
- +" <td>"+username+"</td>"
- +"</tr>"
- // +"<tr>"
- // +" <td>性别：</td>"
- // +" <td>"+sex+"</td>"
- // +"</tr>"
- +"<tr>"
- +" <td>手机号码：</td>"
- +" <td>"+userphone+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>邮箱：</td>"
- +" <td>"+useremail+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>用户地址：</td>"
- +" <td>"+useraddr+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>用户类型：</td>"
- +" <td>"+usertype+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>用户等级：</td>"
- +" <td>"+userlevel+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>用户积分：</td>"
- +" <td>"+usermark+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>注册时间：</td>"
- +" <td>"+createtime+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>最近修改时间：</td>"
- +" <td>"+modifytime+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>是否显示兴趣点：</td>"
- +" <td>"+showinterest+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>是否显示兴趣区域：</td>"
- +" <td>"+showarea+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>是否显示兴趣路线：</td>"
- +" <td>"+showroute+"</td>"
- +"</tr>"
- +"<tr>"
- +" <td>备注：</td>"
- +" <td>"+otherinfo+"</td>"
- +"</tr>"
- +"</table>"
- +"</div>";
- var icon = "../images/houtai/green.gif";
- var marker = addPoint(icon,mapcenter,title,detail);
- return marker;
- }
- Ext.onReady(function() {
- initMap();
- setTimeout("showGridPanel()",1000);
- });
- function showGridPanel(){
- Ext.create('MyApp.views.UserinfoGridPanel').show();
- }
引入的js文件：
- function addPoint(icon, latlon, name, detail) { // 创建标注点。不居中，有标签。
- var point = new MPoint(latlon); // 定义标注点坐标中心。
- maplet.setCenter(latlon); // 将地图调整为以标注点为中心。
- var icon = new MIcon(icon, 22, 30); // 定义标注点图标文件。
- var infoWindow = new MInfoWindow(name, detail); // 定义标注点的气泡信息框。
- var Mlable = new MLabel(name, 16, -24); // 定义标注点标签名字。
- var marker = new MMarker(point, icon, infoWindow, Mlable); // 创建一个标注点对象实例。
- maplet.addOverlay(marker); // 将标注点添加到地图表面。
- marker.openInfoWindow();
- //将最后一次打开的bubble复制给隐藏的div
- if(document.getElementById("bubble")!= null){
- var tempinfo=document.getElementById("bubble").cloneNode(true);
- document.getElementById("hiddenV").appendChild(tempinfo);
- //bubble的关闭button失效,自定义关闭功能
- var oDiv = document.getElementById("mybubble_CBtn");
- oDiv.onclick = function(){
- maplet.hideBubble();
- }
- }
- return marker;
- }
UserinfoGridPanel.js中增加监听，每次关闭了tab时，因为store中数据被缓存了没有重新load，所以监听render grid事件，在地图上添加所有记录的标注点。
点击行记录时，显示标注点的气泡。
- listeners:{
- render : function(scope){
- if(this.store.getCount()>0){
- userMarkerMap = new JMap();
- if(maplet!=null){
- maplet.clearOverlays(true);//清除图层
- }
- for(var i=0;i<this.store.getCount();i++){
- var mapcenter = this.store.getAt(i).get('mapcenter');
- if((null!=mapcenter)&&(""!=mapcenter)){
- var marker = UserMapMarker(this.store.getAt(i));
- userMarkerMap.add(this.store.getAt(i).get('userid'),marker);
- }
- }
- }
- },
- itemclick :function(scope,record){
- var mapcenter = record.get('mapcenter');
- if(null!=mapcenter&&""!=mapcenter){
- maplet.centerAndZoom(new MPoint(mapcenter),11);//经纬度坐标,缩放级别
- if(userMarkerMap.getValue(record.get('userid'))!=null){
- userMarkerMap.getValue(record.get('userid')).openInfoWindow();
- }
- }
- else
- Ext.Msg.alert("提示","此用户没有设置地图中心位置");
- }
- }
UserinfoStore.js中也增加监听，每次store加载数据同时在地图上添加所有记录的标注点。
- load :function(scope, records, operation, success){
- userMarkerMap = new JMap();
- if(maplet!=null){
- maplet.clearOverlays(true);//清除图层
- }
- for(var i=0;i<records.length;i++){
- var mapcenter = records[i].get('mapcenter');
- if((null!=mapcenter)&&(""!=mapcenter)){
- var marker = UserMapMarker(records[i]);
- userMarkerMap.add(records[i].get('userid'),marker);
- }
- }
- }