Javascript 如何在自动居中时从数组中排除坐标为零的标记
伙计们! 请帮我解决一个奇怪的问题。 这里我们有一个定制的谷歌地图,在一个数组中有许多对象。我已经用fitBounds制作了自动居中。不幸的是,有些对象具有(0,0)坐标。在我的示例中,您只能看到其中的一个,但在最终版本中,所有数据都将取自远程XML文件,并且有几个这样的零coords对象 我是JS中的noob,那么有没有一种简单的方法来过滤具有(0,0)坐标的对象,并在创建自动居中时忽略它们 这是我的密码:Javascript 如何在自动居中时从数组中排除坐标为零的标记,javascript,arrays,google-maps,google-maps-api-3,google-maps-markers,Javascript,Arrays,Google Maps,Google Maps Api 3,Google Maps Markers,伙计们! 请帮我解决一个奇怪的问题。 这里我们有一个定制的谷歌地图,在一个数组中有许多对象。我已经用fitBounds制作了自动居中。不幸的是,有些对象具有(0,0)坐标。在我的示例中,您只能看到其中的一个,但在最终版本中,所有数据都将取自远程XML文件,并且有几个这样的零coords对象 我是JS中的noob,那么有没有一种简单的方法来过滤具有(0,0)坐标的对象,并在创建自动居中时忽略它们 这是我的密码: var locations = [ ['1573785', 37.929049
var locations = [
['1573785', 37.92904993, -0.73309714, '180000 €', 'https://fotos15.apinmo.com/2344/1573785/1-1.jpg', '0', '82.00', '0', 'Orihuela Costa'],
['1573813', 0, 0, '14900000 €', 'https://fotos15.apinmo.com/2344/1573813/1-1.jpg', '0', '82.00', '0', 'La Manga del Mar Menor'],
['1573853', 37.9081557, -0.743851199999995, '595000 €', 'https://fotos15.apinmo.com/2344/1573853/3-1.jpg', '0', '82.00', '0', 'Orihuela Costa'],
['1573868', 38.3668300727851, -0.5013084776552583, '1750000 €', 'https://fotos15.apinmo.com/2344/1573868/1-1.jpg', '43', '2000', '43','Alicante'],
['1573874', 37.94373250149462, -0.7567906379699707, '1200000 €', 'https://fotos15.apinmo.com/2344/1573874/1-1.jpg', '0', '600', '2', 'Orihuela Costa'],
['1573909', 37.8970045617763, -0.754108428955078, '210000 €', 'https://fotos15.apinmo.com/2344/1573909/4-1.jpg', '4', '90', '2', 'Orihuela Costa'],
['1573877', 37.922449854629846, -0.7286167144775391, '12000000 €', 'https://fotos15.apinmo.com/2344/1573877/2-1.jpg', '1', '110', '1', 'Orihuela Costa'],
['1573879', 37.9095917, -0.74301330000003, '260000 €', 'https://fotos15.apinmo.com/2344/1573879/4-1.jpg', '2', '78', '1', 'Orihuela Costa'],
['1573896', 37.9144430700431, -0.725269317626953, '1995000 €', 'https://fotos15.apinmo.com/2344/1573896/5-1.jpg', '5', '477', '5', 'Orihuela Costa'],
['Дом в Кабо Роиг', 37.916156, -0.724545199999966, '615000 €', 'https://fotos15.apinmo.com/2344/1573921/4-1.jpg', '1', '195', '2', 'Orihuela Costa'],
['Вилла в Кампоамор', 37.9066009, -0.745517599999971, '1400000 €', 'https://fotos15.apinmo.com/2344/1573967/4-1.jpg', '5', '550', '4', 'Orihuela Costa'],
['1573968', 37.94675263827021, -0.7060861587524414, '140000 €', 'https://fotos15.apinmo.com/2344/1573968/4-1.jpg', '2', '67', '1', 'Torrevieja'],
['1573969', 37.942556074154616, -0.7123517990112305, '135000 €', 'https://fotos15.apinmo.com/2344/1573969/4-1.jpg', '3', '103', '1', 'Torrevieja'],
['1573982', 37.909499757334224, -0.7429933547973633, '140000 €', 'https://fotos15.apinmo.com/2344/1573982/8-1.jpg', '3', '83', '2', 'Orihuela Costa'],
['1573983', 37.9391007, -0.7477284000000282, '130000 €', 'https://fotos15.apinmo.com/2344/1573983/3-1.jpg', '2', '98', '1', 'Orihuela Costa']
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(37.922, -0.728),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var limits = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var marker, i;
var gmarkers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: {
url: 'https://i.postimg.cc/CxLgfgXj/map-price-marker-1.png',
labelOrigin: new google.maps.Point(60, 20)
},
label: {
labelOrigin: new google.maps.Marker(9, 8),
text: locations[i][3],
color: "#FFFFFF",
fontSize: "13px",
fontWeight: "standard",
fontFamily: "Montserrat",
},
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('<div id="iw-container">' +
'<div>' +'<div class="house_card__label new_object">' +'<span>новинка</span>' + '</div>' +'</div>' +
'<div class="image">' + '<a href="realty/villas/'+ locations[i][0] +'">' +'<img src="'+ locations[i][4] +'">' +'</a>' +'</div>' +
'<div class="house_card__info">' +
'<a href="realty/villas/'+ locations[i][0] +'">' +'<h4>' + locations[i][0] +'</h4></a>' +
'<p class="house_price">'+ locations[i][3] +'</p>' +
'<div class="house_features">' +
'<span>Количество спален:</span>' +
'<span>'+ locations[i][5] +'</span>' +
'</div>' +
'<div class="house_features">' +
'<span>Жилая площадь (м²):</span>' +
'<span>'+ locations[i][6] +'</span>' +
'</div>' +
'<div class="house_features">' +
'<span>Количество ванных:</span>' +
'<span>'+ locations[i][7] +'</span>' +
'</div>' +
'<div class="house_location">' +
'<div class="house_location__text">'+ locations[i][8] +'</div>' +
'</div>' +
'</div>' +
'</div>');
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
limits.extend(marker.position);
map.fitBounds(limits);
}
var styles = [{
fontFamily:'Montserrat',
fontWeight:'400',
textColor:'#FFFFFF',
textSize:'13',
url: 'https://i.postimg.cc/6pjNrPxF/map-cluster-1.png',
height: 63,
width: 65,
}]
var clusterOptions = {gridSize: 30, maxZoom: 16, "styles":styles};
var markerCluster = new MarkerClusterer(map, gmarkers, clusterOptions);
var位置=[
['1573785', 37.92904993, -0.73309714, '180000 €', 'https://fotos15.apinmo.com/2344/1573785/1-1.jpg“,“0”,“82.00”,“0”,“Orihuela Costa”],
['1573813', 0, 0, '14900000 €', 'https://fotos15.apinmo.com/2344/1573813/1-1.jpg“,”0“,”82.00“,”0“,”海洋漫画“,
['1573853', 37.9081557, -0.743851199999995, '595000 €', 'https://fotos15.apinmo.com/2344/1573853/3-1.jpg“,“0”,“82.00”,“0”,“Orihuela Costa”],
['1573868', 38.3668300727851, -0.5013084776552583, '1750000 €', 'https://fotos15.apinmo.com/2344/1573868/1-1.jpg“,”43“,”2000“,”43“,”阿利坎特“],
['1573874', 37.94373250149462, -0.7567906379699707, '1200000 €', 'https://fotos15.apinmo.com/2344/1573874/1-1.jpg“,“0”,“600”,“2”,“Orihuela Costa”],
['1573909', 37.8970045617763, -0.754108428955078, '210000 €', 'https://fotos15.apinmo.com/2344/1573909/4-1.jpg“,“4”,“90”,“2”,“Orihuela Costa”],
['1573877', 37.922449854629846, -0.7286167144775391, '12000000 €', 'https://fotos15.apinmo.com/2344/1573877/2-1.jpg“,“1”,“110”,“1”,“Orihuela Costa”],
['1573879', 37.9095917, -0.74301330000003, '260000 €', 'https://fotos15.apinmo.com/2344/1573879/4-1.jpg“,”2“,”78“,”1“,”Orihuela Costa“],
['1573896', 37.9144430700431, -0.725269317626953, '1995000 €', 'https://fotos15.apinmo.com/2344/1573896/5-1.jpg“,“5”,“477”,“5”,“Orihuela Costa”],
['Дом в Кабо Роиг', 37.916156, -0.724545199999966, '615000 €', 'https://fotos15.apinmo.com/2344/1573921/4-1.jpg“,“1”,“195”,“2”,“Orihuela Costa”],
['Вилла в Кампоамор', 37.9066009, -0.745517599999971, '1400000 €', 'https://fotos15.apinmo.com/2344/1573967/4-1.jpg","5","550","4","Orihuela Costa",,
['1573968', 37.94675263827021, -0.7060861587524414, '140000 €', 'https://fotos15.apinmo.com/2344/1573968/4-1.jpg“,“2”,“67”,“1”,“Torrevieja”],
['1573969', 37.942556074154616, -0.7123517990112305, '135000 €', 'https://fotos15.apinmo.com/2344/1573969/4-1.jpg","3","103","1","Torrevieja",,
['1573982', 37.909499757334224, -0.7429933547973633, '140000 €', 'https://fotos15.apinmo.com/2344/1573982/8-1.jpg“,“3”,“83”,“2”,“Orihuela Costa”],
['1573983', 37.9391007, -0.7477284000000282, '130000 €', 'https://fotos15.apinmo.com/2344/1573983/3-1.jpg“,”2“,”98“,”1“,”Orihuela Costa“]
];
var map=new google.maps.map(document.getElementById('map'){
缩放:12,
中心:新google.maps.LatLng(37.922,-0.728),
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var limits=new google.maps.LatLngBounds();
var infowindow=new google.maps.infowindow();
var标记,i;
var gmarkers=[];
对于(i=0;i”+地点[i][3]+”'+
'' +
'Количество спален:' +
''+位置[i][5]+''+
'' +
'' +
'Жилая площадь (м²):' +
''+位置[i][6]+''+
'' +
'' +
'Количество ванных:' +
''+位置[i][7]+''+
'' +
'' +
''+位置[i][8]+''+
'' +
'' +
'');
信息窗口。打开(地图、标记);
}
})(marker,i));
G标记器。推(标记器);
极限延伸(标记位置);
地图边界(限制);
}
变量样式=[{
fontFamily:“蒙特塞拉特”,
重量:'400',
textColor:“#FFFFFF”,
textSize:'13',
网址:'https://i.postimg.cc/6pjNrPxF/map-cluster-1.png',
身高:63,
宽度:65,
}]
var clusterOptions={gridSize:30,maxZoom:16,“styles:styles};
var markerCluster=新的MarkerClusterer(映射、gmarkers、clusterOptions);
和。您可以使用
过滤器
方法,使用0
跳线过滤出元素,如下所示:
locations.filter((index) => index[1] != 0 && index[2] != 0);
您可以使用
filter
方法使用0
跳线过滤出元素,如下所示:
locations.filter((index) => index[1] != 0 && index[2] != 0);
一个选项是,如果两个坐标均为0,则跳过标记创建:
for (i = 0; i < locations.length; i++) {
if (locations[i][1] == 0 && locations[i][2] == 0)
continue;
// existing marker creation code ...
#地图{
身高:100%;
宽度:100%;
背景色:#CCC;
}
html,
身体{
身高:100%;
保证金:0;
填充:0;
}
.gm-style.gm-style-iw-t::之后{
背景:无;
盒影:无;
}
.gm-style.gm-style-iw-c{
填充:0!重要;
溢出:可见!重要;
}
.gm-style.gm-style-iw-d{
溢出:隐藏!重要;
}
button.gm-ui-hover-effect{
背景:url(https://i.postimg.cc/8PGDNWbX/xs.png)!重要;
背景尺寸:包含!重要;
z指数:10!重要;
右:-9px!重要;
}
button.gm-ui-hover-effect img{
显示:无!重要;
}
.gm风格iw{