Встроить SVG в jvectormap

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

То, что я пытаюсь сделать, находится по этой ссылке.


javascript svg jquery jvectormap
person AlexJaa    schedule 08.09.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Объект, который вы передаете в vectorMap, и массив markers внутри него имеют неверный формат с отсутствующими скобками и замыканиями. Если вы организуете отступы в коде, такие вещи легко заметить.

Документация и примеры не очень хороши. Вот как устранить ошибку jvm is not defined, которую я обнаружил при тестировании вашего кода (и это происходит в одном из их образцов файлов).

Кроме того, в приведенном вами примере с торговым центром не упоминается необходимость загрузить mall-map.js (в вашем случае well-map.js). Он выдает эту ошибку в вашем коде:

Uncaught Error: Попытка использовать карту, которая не была загружена: хорошо

Вот код, который я тестировал, карта не отображает ничего значимого, как я тестировал с 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>
person brasofilo    schedule 12.09.2014