我必须自定义一个 map 才能在 jvector map 中使用它。所以我使用内联 SVG
来制作 map 。 map 显示得很完美,但我无法使用 jvectormap 来操作它。我只是 jvectormap 的初学者,所以也许我的代码有点错误。如果您有任何想法,请接受任何答案。
提前致谢。
无论如何,这是我的代码:
<div id="pantsun" >
<svg title="well" width="500" height="300" style="border: 1px solid #000;background-color: lightgreen;" >
<rect x="200" y="0" width="30" height="300" style="fill:white;" />
<rect x="0" y="50" width="500" height="30" style="fill:white;" />
<rect x="0" y="150" width="500" height="30" style="fill:white;" />
<rect x="10" y="18" width="30" height="30" style="fill:darkgrey;" />
<rect x="45" y="18" width="30" height="30" style="fill:darkgrey;" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
<script>
$(function(){
$('#pantsun').vectorMap({
map: 'well',
backgroundColor: 'transparent',
markers: [{
coords: [0, 50],
name: 'well 1',
style: {fill: 'white'}
},{
coords: [0, 150],
name: 'well 2',
style: {fill: 'white'}
}}};
</script>
我想做的是这个link.
最佳答案
您传递给 vectorMap 的对象及其内部的 markers
数组格式不正确,缺少括号和闭包。如果你组织代码缩进,这种事情很容易被发现。
文档和示例不是很好。这是how to solve the jvm is not defined
error我在测试您的代码时发现的(这发生在他们的示例文件之一中)。
此外,Mall example that you cite没有提到需要 load a mall-map.js
(在您的情况下是well-map.js
)。它会在您的代码中产生此错误:
Uncaught Error: Attempt to use map which was not loaded: well
这是我测试的代码, map 没有呈现任何有意义的内容,正如我使用 mall-map.js
测试的那样,但没有出现任何 JS 错误...
<script src="assets/jquery-1.8.2.js"></script>
<script src="../jquery-jvectormap-1.2.2.min.js"></script>
<script src="../jquery-jvectormap.js"></script>
<script src="mall-map.js"></script>
<script>
$(function(){
$('#pantsun').vectorMap({
map: 'mall',
backgroundColor: 'transparent',
markers: [
{ coords: [0, 50], name: 'well 1', style: {fill: 'white'} },
{ coords: [0, 150], name: 'well 2', style: {fill: 'white'} }
] // <-- missing
}); // <-- mal formed
}); // <-- mal formed
</script>
关于javascript - 内联 SVG 到 jvectormap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25719685/