在IE9中运行OpenLayers地图时,我得到“无法获取属性'displayClass'的值:对象为空或未定义”错误消息。
在查看问题后,看来Openlayers.js文件中的这一行是问题
this.controls=this.controls.concat(controls);
for(var i=0,len=controls.length;i<len;i++)
{var element=document.createElement("div");
element.className=controls[i].displayClass+"ItemInactive"; /* Problem here */
controls[i].panel_div=element;if(controls[i].title!="")
{controls[i].panel_div.title=controls[i].title;}
我的自定义工具栏的脚本是:
OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel,{
initialize: function(options){
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
this.addControls([
new OpenLayers.Control.Navigation({displayClass: 'olControlNavigation', zoomBoxEnabled:false}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {displayClass: 'olControlDrawPoint'}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {displayClass: 'olControlDrawPath'}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {displayClass: 'olControlDrawPolygon'}),
new OpenLayers.Control.ZoomBox({displayClass: 'olControlZoomBox', alwaysZoom:true}),
])
this.displayClass = 'olControlCustomNavToolbar'
},
draw: function(){
var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
this.defaultControl = this.controls[0];
return div;
}
});
var panel = new OpenLayers.Control.CustomNavToolbar({div:OpenLayers.Util.getElement('panel')});
map.addControl(panel);
使用CSS
olControlCustomNavToolbar{
float:left;
right:0px;
top:0px;
width:160px;
height:24px;
margin:0px 6px 0px 0px;
}
.olControlCustomNavToolbar div{
float:right;
height:24px;
width:160px;
margin:0px 0px 0px 6px;
}
.olControlCustomNavToolbar .olControlNavigationItemActive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/pan_on.png")!important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlNavigationItemInactive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/pan_off.png")!important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlDrawPointItemActive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/draw_point_on.png")!important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlDrawPointItemInactive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/draw_point_off.png")!important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlDrawPathItemActive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/draw_line_on.png") !important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlDrawPathItemInactive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/draw_line_off.png") !important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlDrawPolygonItemActive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/draw_polygon_on.png") !important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlDrawPolygonItemInactive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/draw_polygon_off.png") !important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlZoomBoxItemActive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/drag-rectangle-off.png") !important;
background-repeat: no-repeat;
}
.olControlCustomNavToolbar .olControlZoomBoxItemInactive{
width:24px !important;
height:24px !important;
margin:3px 0px 0px 6px !important;
background-image: url("/OpenLayers-2.11/theme/default/img/drag-rectangle-on.png") !important;
background-repeat: no-repeat;
}
有人能对我在这里做错了什么有所了解吗?谢谢
编辑: FYI这在Firefox,Chrome和Opera中运行良好。只有IE有这个问题。
编辑:抱歉,我犯了一个错误,我运行IE7兼容;在取下标签后重新措辞: meta http-equiv =“X-UA-Compatible”content =“IE = EmulateIE7”它在IE9中运行良好。
或者它不在IE7或IE8模式下工作,如果有人有任何想法仍然希望在IE7和IE8中使用它。谢谢,抱歉这个混乱。
答案 0 :(得分:0)
在OpenLayers.Control.CustomNavToolbar
类中,this.addControls
参数数组有一个逗号。
答案 1 :(得分:0)
如果使用的话,FYI IE9会死:
map.layers [J]。的原强> .CLASS_NAME
请改用它,你没关系:
map.layers [j]的.CLASS_NAME