我有一个问题已经阻止我继续前进 3 天了
我有一个附加有 anchor 标记的列表,但是当我删除它时, anchor 标记更改为 style:none
和 <li>
样式保留。
当标记超出 map 边界时,我在 Google map 上使用它。我想要整个 <li>
包含要删除的 anchor 标记,但删除的是 anchor 标记而不是 <li>
.
这是我的代码。
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function codeAddress() {
infoBubble = new InfoBubble({
map: map,
shadowStyle: 0,
padding: 10,
borderRadius: 10,
arrowSize: 15,
maxWidth: 300,
borderWidth: 1,
borderColor: '#ccc',
arrowPosition: 50,
arrowStyle: 0
});
$.getJSON('/Dashboard/LoadWorkerList', function Geocode(addresses) {
$.each(addresses, function () {
var currVal = this["AddressLine1"];
var Name = this["Name"];
var Gender = this["Gender"];
var Bdate = this["Birthdate"];
var ID = this["Worker_ID"];
var Latitude = this["Latitude"];
var Longitude = this["Longitude"];
var LatLang = new google.maps.LatLng(Latitude, Longitude);
var marker = new google.maps.Marker({
map: map,
icon: iconBase + 'man.png',
position: LatLang,
title: currVal
})
var link = $('<a href="#">' + currVal + '</a>')
.data('location', LatLang);
$('#places').append($('<li id=\'List\' class=\'List\'>').append(link));
link.on('click', function (event) {
event.preventDefault();
google.maps.event.trigger(addresses[0], "click");
infoBubble.removeTab(0);
infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
infoBubble.open(map, marker);
});
google.maps.event.addListener(map, 'idle', function () {
$('#places').find('li a').css('display', function () {
return (map.getBounds().contains($(this).data('location')))
? ''
: 'none';
});
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoBubble.removeTab(0);
infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
infoBubble.open(map, marker);
}
})(marker, currVal));
addresses.push(marker);
})
google.maps.event.trigger(map, 'bounds_changed');
})
}
当它加载时,看第二张图片,注意样式仍然存在
样式
<style>
.List
{
background-color: #f1f1f1;
padding: 10px;
overflow: hidden;
}
.List:nth-child(odd)
{
background-color: #fcfcfc;
}
</style>
最佳答案
旧:
$('#places li').css('display', function () {
return (map.getBounds().contains($(this).data('location'))) ? '' : 'none';
});
新:
$('#places > li').each(function() {
var inside = (map.getBounds().contains($(this).find('a').data('location'))) ? '' : 'none';
$(this).css('display', inside);
});
试试这个
关于javascript - 删除带有附加 anchor 标记的 `<li>` 留下样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21446741/