jQuery: dynamische Bildmarkierungen auf Basis von Koordinaten von Datendatei

Question

Ich habe ein Bild Karte und eine Datei enthalten Listen von Koordinaten:

var coord_data = { 
    "100 100": "2010-_MG_0419.jpg" 
    "110 110": "2010-_MG_0412.jpg"}; 

ich eine Markierung auf jedem dieser Koordinaten auf dem Bild Karte setzen will.

Inspiration von @RDeving bekommen, habe ich eine Version, die irgendwie funktioniert:

Fiddle Link

Aber wenn ich ändern:

   $('<span class="marker"/>').css({ 
       "top": 100, 
       "left": 200 
      }).appendTo(target); 

An:

   $('<span class="marker"/>').css({ 
       "top": coords[0], 
       "left": coords[1] 
      }).appendTo(target); 

Das CSS funktioniert nicht für die Position des Markers.

Ich habe eine Weile gesucht und vergeblich.

Irgendwelche Ideen, warum es so verhält?

Answer 1

, wenn Sie das Bild in einem "img" DOM-Element haben könnten Sie einfach ...

// Have some css 
img#myimage { 
    position: relative; 
} 
label.icon { 
    position: absolute; 
} 


//Append them dynamically 
const $imgTag = $("img#myimage"); 

coord_data.forEach(data => { 
    const coords = data.split(" "); 
    $imgTag.append($("<label>").addClass("icon").css({ 
    'top': coords[0], 
    'left': coords[1] 
    })); 
}); 

Answer 2

OK, habe ich die Lösung. Wenn der Wert ein "String" -Typ ist, muss ich auch "px" hinzufügen. Aber wenn der Wert ein "Integer" -Typ ist, wird kein "px" benötigt.

dies würde So arbeiten:

$('<span class="marker"/>').css({ 
    "top": coords[0]+"px", 
    "left": coords[1]+"px" 
    }).appendTo(target); 

Oder

"top": parseInt(coords[0]),