下拉菜单中的jvectormaps,NS_ERROR_FAILURE: [英] jvectormaps in dropdown menu, NS_ERROR_FAILURE:
问题描述
(无地图
和错误消息NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.jsreturn this.node.getBBox();
在Firefox中,我已经尝试了许多不同的东西,但没有运气。
< script type =text / javascriptsrc =jVectormap / jquery-jvectormap -2.0.2.min.js>< / script>
< script type =text / javascriptsrc =../ maCountries / be_coord.js>< / script>
< script type =text / javascriptsrc =../ maCountries / be_map.js>< / script>
这是下拉菜单中的html
< div id =mapJV >
< / div><! - mapjv container - >
<
$(function(){
var)这是be_map.js中的代码, map,
map = new jvm.Map({
container:$('#map JV'),
map:'be_mill_en',
backgroundColor:'#F6F3EF',
regionStyle:{
initial:{
fill:'#ABBDC4'
},
},
});
});
$(< style> .jvectormap-container {width:400px; height:400px;}< / style>).appendTo(head);
be_coord.js中的代码只是普通的坐标。
<解决方案
火狐通常在隐藏元素内部渲染SVG时遇到麻烦。所以这里的解决方案可以在容器变得可见之后创建和渲染地图。
my jvector maps are in a dropdown menu, it works well in safari, opera and chrome but breaks
(no map
and error message NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.js "return this.node.getBBox();"
in firefox, I've tried lots of different things but no luck.
these are in the head.
<script type="text/javascript" src="jVectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../maCountries/be_coord.js"></script>
<script type="text/javascript" src="../maCountries/be_map.js"></script>
this is the html in the dropdown menu
<div id="mapJV">
</div> <!--mapjv container-->
This is the code in be_map.js which breaks in firefox.
$(function() {
var map,
map = new jvm.Map({
container: $('#mapJV'),
map: 'be_mill_en',
backgroundColor: '#F6F3EF',
regionStyle: {
initial: {
fill: '#ABBDC4'
},
},
});
});
$( "<style>.jvectormap-container {width : 400px; height: 400px;}</style>" ).appendTo( "head" );
the code in be_coord.js is just the normal coordinates.
Firefox usually has trouble with rendering SVG inside of the hidden elements. So solution here could be creating and rendering map after its container getting visible.
这篇关于下拉菜单中的jvectormaps,NS_ERROR_FAILURE:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!