0

Стоит задача: сделать фильтр маркеров на основе radio кнопок. В сети нашел только пример с чекбоксами, которые скрывают маркеры. Очень прошу подсказать или показать пример реализации с radio.

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});
// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']],
  ['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']],
  ['2', 'Title 3', 52.4555687, 5.039231599999994, ['car', 'third']],
  ['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']]
];
markerCount = markers1.length
/** Function to init map */
function initialize() {
    var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markerCount; i++) {
        addMarker(markers1[i]);
    }
}
/** Function to add marker to map */
function addMarker(marker) {
    var category = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(15);
        }
    })(marker1, content));
}
// Function on Change of checkbox
updateView = function (element) {
  	if (element) {
        //Get array with names of the checked boxes
        checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) { return o.id; });
        console.log(checkedBoxes);
        for (i = 0; i < markerCount; i++) {
        		marker = gmarkers1[i];
            console.log(marker.category)
            //Filter to show any markets containing ALL of the selected options
        		if(typeof marker.category == 'object' && checkedBoxes.every(function (o) {
        return (marker.category).indexOf(o) >= 0;})){
            		marker.setVisible(true);
        		}
            else {
  		          marker.setVisible(false);
  		      }
        }
  	}
  	else {
   		 console.log('No param given');
		}
}
// Init map
initialize();
#map-canvas {
    width: 500px;
    height: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<div id="options">
  <input type="checkbox" id="car" onchange="updateView(this);"/> Car
  <input type="checkbox" id="second" onchange="updateView(this);"/> Second
  <input type="checkbox" id="third" onchange="updateView(this);"/> Third
</div>

1 ответ 1

2

Вот как это делается.

Маркеры разбиты по группам в объекте myMarkers, каждый ключ это имя группы, а каждое значение – объект группы, в которой ключи это заголовки маркера, а значение это координаты маркера.

В каждой группе могут быть опции, в опциях можно задавать какие угодно параматры которые будут применены к каждому маркеру группы, в данном примере в опциях есть иконки и анимация.

Объект googleMarkers по структуре как и myMarkers но содержит объекты гугл маркеров, а не их описание, этот объект заполняется в функции setMarkers.

Радио-кнопки привязаны к группам по атрибуту data-*, это разрешает использовать произвольный id для элемента. Изначально показываются те маркеры, которые относятся к радио-кнопке которая checked. Радио-кнопка с data-marker="showall" показывает все элементы.

Остальное должно быть понятным, в коде есть комментарии и используется ES2015.

let map, googleMarkers = {} // карта и объект содержащий объекты гугл маркеров
const radios = document.querySelectorAll('input[type=radio][data-marker]')
const myMarkers = { // описание маркеров
  car: {
    'Title 1': { 
      coordinates: [52.4357808, 4.991315699999973],
      info: 'Завод'
    },
  },
  second: { // имя группы
    options: { // опции для маркеров этой группы
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 
    }, 
    'Title 2': { 
      coordinates: [52.4357808, 4.981315699999973],
      info: 'Магазин'
    },
    'Title 3': [52.4555687, 5.039231599999994]
  },
  third: {
    options: { 
      icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      animation: google.maps.Animation.BOUNCE
    },
    'Title 4': [52.4755687, 5.019261599999994],
    'Title 5': [52.4555687, 5.049231599999994],
    'Title 6': { 
      coordinates: [52.4055687, 5.039236599999994],
      info: 'Больница'
    }
  }
}

initMap()
// для каждой радио-кнопки добавляет слушатель события клика
radios.forEach(i => i.addEventListener('click', radioClick))


function initMap() {
  const center = new google.maps.LatLng(52.4527808, 4.991315699999973)
  const mapOptions = {
    zoom: 11,
    center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)
  setMarkers()
}

function setMarkers () {
  let isFirst = true
  for (let group in myMarkers) {
    for (let title in myMarkers[group]) {
      if (title === 'options') // не берет во внимание опции
        continue
   
      const myMarker = myMarkers[group][title]
      const visible = document.querySelector(`input[type=radio][data-marker=${group}]`).checked
      let coordinates, info
      
      if (myMarker[0]) { // если массив координат
        coordinates = myMarker
      } else {
        coordinates = myMarker.coordinates
        info = myMarker.info
      }
      
      const marker = new google.maps.Marker({
        title,
        position: {lat: coordinates[0], lng: coordinates[1]},
        map,
        visible,
        ...myMarkers[group].options // берет опции группы
      })
      
      if (info)
        addInfoWindow(marker, info)
      
      googleMarkers[group] = googleMarkers[group] || [] // создает массив если его нет
      googleMarkers[group].push(marker)
    }
  }
}

function radioClick ({ target }) { // берет target события
  const group = target.dataset.marker // id группы к которой принадлежит радио-кнопка
  const everyMarker = getEveryMarker()
  
  // прячет у всех infowindow
  markersHideInfoWindow(everyMarker)
  
  if (group === 'showall') {
    // показывает всех
    everyMarker.forEach(i => i.setVisible(true))
    return
  }
  // те кто был видимым становиться не видемым
  everyMarker.forEach(i => i.visible && i.setVisible(false))
  
  // показывает группу к которой принадлежит радио-кнопка
  for (let marker of googleMarkers[group])
    marker.setVisible(!marker.visible)
}

function addInfoWindow (marker, content) {
  const infowindow = new google.maps.InfoWindow({
    content
  })
  marker.infowindow = infowindow
  
  marker.addListener('click', () => {
    // прячет у всех infowindow
    markersHideInfoWindow(getEveryMarker())
  
    //console.log(infowindow)
    infowindow.open(map, marker)
  })
}

function getEveryMarker () {
  const arrOfEveryGroup = Object.values(googleMarkers) // массив массивов групп маркеров
  const everyMarker = [].concat.apply([], arrOfEveryGroup) // массив всех маркеров
  
  return everyMarker
}

function markersHideInfoWindow (markers) {
  markers.forEach(i => i.infowindow && i.infowindow.close())
}
#map-canvas { 
  height: 160px;
  width: 100%;
}
#map-canvas img {
  max-width: none;
}
    
#map-canvas div {
  -webkit-transform: translate3d(0, 0, 0);
}
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>


<div id="map-canvas" ></div>


<input data-marker="car" id="car" type="radio" name="myMarkers">
<label for="car">car</label>

<input data-marker="second" id="second" type="radio" name="myMarkers" checked>
<label for="second">second</label>

<input data-marker="third" id="third" type="radio" name="myMarkers">
<label for="third">third</label>

<input data-marker="showall" id="showall" type="radio" name="myMarkers">
<label for="showall">Показать все</label>

Размер карты уменьшен для удобного запуска на этом сайте.

4
  • Огромнейшее спасибо, очень помогли ) 1 сен 2018 в 21:27
  • Подскажите, пожалуйста, как добавить попап контент каждому маркеру? info window 2 сен 2018 в 11:10
  • Теперь если передать объект, то надо задавать координаты вот так и появляется возможность задать info(контент infowindow): 'Title 6': { coordinates: [52.4055687, 5.039236599999994], info: 'Больница' } И как было до этого можно передать просто массив 'Title 5': [52.4555687, 5.049231599999994] из которого берутся координаты 2 сен 2018 в 17:41
  • Сделал так, спасибо ) jsfiddle.net/6eLg3a8v/1 2 сен 2018 в 19:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.