Inline SVG to jvectormap

Question

Мне нужно настроить карту, чтобы использовать ее в jvector-карте. Поэтому я использую inline SVG, чтобы сделать карту. Карта показывает отлично, но я не могу управлять ею с помощью 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.

Answer 1

Объекта вы передаете к 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

Вот код, я проверил, карта ничего не делает смысл, так как я тестировал с mall-map.js, но нет JS ошибок является thrwon ...

<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>