jQuery UI 位置ユーティリティを使用して、イメージ マップにマーカーを配置しています。マップ内の各エリア タグで html5 データ属性を使用しており、ユーザーがエリアの 1 つと同じデータ属性を含むリンクをクリックすると、マーカーの html が生成されます。これは正しく機能しています。
ただし、リンクはさまざまなエリア タグに対応できます。そこで、DOM 要素の配列を作成し、それらをページの div に追加しました。次に、各マーカーで位置ユーティリティを使用しようとすると、配列内のすべてのマーカーが、データ属性に一致するエリア タグではなく、同じ位置に配置されます。これは生のDOMオブジェクトではなく、配列を追加することに関係していると思いますか?
以下は私のコードです:
var $holder = $('#holder'); //div that holds the generated markers
var $map = $('#floorPlan');
var $area = $('#floorPlan area');
$('.locationLink li a').each(function () {
$(this).click(function () {
//remove pinned markers
$holder.children('.pinned').fadeOut(function () {
$(this).remove();
});
var grp = $(this).attr('data-group'),
$grpMatch = new Array();
//generate new markers and match to area
$map.find('area[data-group="' + grp + '"]').each(function () {
var loc = $(this).attr('data-loc')
// create a marker for each matched area and create array
if ($(this).hasClass('hall')) {
var eleItems = '<div data-loc="' + loc + '" data-group="' + grp + '" class="marker marker-blue"></div>';
}
else {
var eleItems = '<div data-loc="' + loc + '" data-group="' + grp + '" class="marker"></div>';
}
$grpMatch.push(eleItems);
$holder.append($grpMatch);
positionMarker();
});
return false;
});
});
function positionMarker() {
$holder.children('.marker').each(function() {
var $lMarker = $(this);
var mLoc = $lMarker.attr('data-loc');
var $aMatch = $map.find('area[data-loc="' + mLoc + '"]');
$lMarker.position({
'my': 'center center',
'at': 'center center',
'of': $aMatch,
'collision': 'none'
}).addClass('pinned');
});
}
助けてくれてありがとう