Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题解决
2012-07-20 16:56
344 查看
Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题非常不稳定，时好时坏。最终采取了最新的mapbar地图
以及控制bubble节点的做法。如下：
Userinfo.jsp
userinfo.js
引入的js文件：
UserinfoGridPanel.js中增加监听，每次关闭了tab时，因为store中数据被缓存了没有重新load，所以监听render grid事件，在地图上添加所有记录的标注点。
点击行记录时，显示标注点的气泡。
UserinfoStore.js中也增加监听，每次store加载数据同时在地图上添加所有记录的标注点。
<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);
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4中tab打开，关闭再打开不显示或显示重叠问题的解决方法
- Extjs4弹出Mapbar地图标注问题——最终解决版
- [ExtJS4]ExtJS4左边菜单面板收缩展开，右边TabPanel内容动态更新（解决宽度不能自适应问题）
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开，右边TabPanel内容动态更新（解决宽度不能自适应问题）
- Ext中的tabpanel中的项关闭后再打开就不显示的问题经解决
- 解决VS2010打开Web页面时经常由于内存较低而导致VS2010自动关闭的问题
- 解决easyui 已打开tab重新加载问题
- VS2010打开就自动关闭问题解决
- 解决当打开Unity时 提示项目已经打开，而自己之前并没有打开过（可能之前异常关闭）的问题
- 解决载入(打开)加壳程序后，OD关闭退出的问题
- 解决linux下source /etc/profile关闭终端失效问题
- 连接未关闭。 连接的当前状态为打开。问题的解决
- VS2010打开就自动关闭问题解决
- 打开MSN提示Windows Live Communication Platform遇到问题需要关闭错误的解决方法
- 解决载入(打开)加壳程序后，OD关闭退出的问题
- vmware异常关闭后导致虚拟机无法打开问题解决办法
- 打开某个AVI文件，explorer.exe遇到问题需要关闭的解决方法
- 打开doc文档提示Word 遇到问题需要关闭以安全模式启动解决办法
- 解决SPACE+CTRL没有办法打开或者关闭输入法的问题
- Word遇到问题需要关闭，以安全模式打开的解决方法