javascript - 如何在自动居中时从数组中排除坐标为零的标记

问题描述

伙计们！请帮我解决一个奇怪的问题。在这里，我们有一个自定义的谷歌地图，其中包含一个数组中的多个对象。我已经使用 fitBounds 进行了自动居中。不幸的是，某些对象具有 (0,0) 坐标。在我的示例中，您只能看到其中一个，但在最终版本中，所有数据都将从远程 XML 文件中获取，并且那里有几个这样的零坐标对象。

我是 JS 中的菜鸟，所以有没有一种简单的方法来过滤具有 (0,0) 坐标的对象并在自动居中时忽略它们？

这是我的代码：

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);

和JSfiddle。

标签： javascriptarraysgoogle-mapsgoogle-maps-api-3google-maps-markers

javascript - 如何在自动居中时从数组中排除坐标为零的标记

问题描述

解决方案

推荐阅读