主页 / 问题 / 876277
Accepted
Александр
Asked:2020-09-02 02:24:15 +0000 UTC2020-09-02 02:24:15 +0000 UTC

谷歌地图 api 标记过滤器

  • 772

有一个任务：在单选按钮的基础上制作标记过滤器。在网上，我只找到了一个带有隐藏标记的复选框的示例。我请求您建议或展示一个带有收音机的实现示例。

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>

javascript

1 个回答

  1. Best Answer

    这是它是如何完成的。

    标记被分组在一个对象myMarkers中，每个键是组名，每个值是一个组对象，其中键是标记标题，值是标记的坐标。

    每个组都可以有选项，在选项中您可以设置将应用于每个组标记的任何参数，在此示例中，选项具有图标和动画。

    对象googleMarkers按结构，类似myMarkers但包含谷歌标记对象，而不是它们的描述，这个对象填充在函数中setMarkers。

    单选按钮按属性绑定到组data-*，这允许您为元素使用任意 id。最初，会显示那些引用选中的单选按钮的标记。单选按钮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>

    地图的大小已减小，以便在此站点上运行。

    • 2

相关问题