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 that you have read and understand our privacy policy and code of conduct.

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