顯示圖象在基於圖像上的座標

Question

我正在基於我已經在陣列加入的CSS位置加入點在地圖上的一個接一個。

var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}]; 
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}]; 

但我想要在地圖上根據座標逐一添加點。

var coordsx =[{'x':'155'},{'x':'338'},{'x':'236'},{'x':'196'},{'x':'171'}];  
var coordsy =[{'y':'238'},{'y':'328'},{'y':'488'},{'y':'164'},{'y':'439'}]; 

I tried here

我的腳本是在這裏：

var position = 0; 
var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}]; 
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}]; 

$(postop).each(function(i){ 
var dots=$('<img src="http://i.imgur.com/iAfzQ.jpg" />'); 
     dots.css('position','absolute'); 
     dots.offset({ top: postop[position].top, left: posleft[position].left });   
     $("#overlay-dots").append(dots); 
     position++; 
     i++; 
});​ 

Answer 1

我會把座標轉換成數組的數組。你也不需要增加變量，因爲jquery each爲你做。 簡化代碼將是：

var coords = [[23, 23], [34, 84], [34, 54], [56, 76], [103, 103]]; 

$(coords).each(function(i){ 
    var pos = this; 
    var dot = $('<img src="http://i.imgur.com/iAfzQ.jpg" />'); 
    dot.css({ 
     position: 'absolute', 
     left: pos[0] + "px", 
     top: pos[1] + "px" 
    }); 
    $("#overlay-dots").append(dot); 
});​