使用单选按钮在谷歌地图中切换标记

Question

我在洛杉矶有4个城市，我有5个单选按钮，如果我想点击每个标记，它将显示或隐藏特定标记或显示所有标记，我该如何实现？

这是代码

 var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 34.052235, lng: -118.243683},
      zoom: 11
    });
    setMarkers(map);
  }

  var cities = [
        ['Compton Los Angeles', 33.895847, -118.220070],
        ['Huntington Los Angeles', 33.984932, -118.227821],
        ['Los Angeles International Airport',33.942791, -118.410042],
        ['Beverly Hills Los Angeles',34.073620, -118.400352]
  ];

  function setMarkers(map) {
        for (var i = 0; i < cities.length; i++) {
            var city = cities[i];
            var marker = new google.maps.Marker({
              position: {lat: city[1], lng: city[2]},
              map: map
            }); 
      }
  }

<input id="compton" type="radio" name="city" checked="checked">
<input id="huntington" type="radio" name="city">
<input id="losangeles" type="radio" name="city">
<input id="beverlyhills" type="radio" name="city">
<input id="showall" type="radio" name="city">

Answer 1

          google.maps.event.addListener(marker, 'click', function() {
                // Show\hide radio-btns
                document.getElementById("showall").style.display = 'none';
                document.getElementById("compton").style.display = 'inline';
                // Hide marker
                this.setVisible(false); // maps API hide call
                // or
                markers[2].setVisible(false);
          });

JSFiddle：http://jsfiddle.net/4a87k/857/（更新）

它是如何在标记上添加onclick事件：adding-an-onclick-event-to-google-map-marker

Answer 2

我在俄罗斯门户网站HERE回答了这个问题。

谷歌翻译：

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

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

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

单选按钮通过data- *属性绑定到组，这允许您为元素使用任意id。最初，显示与检查的单选按钮相关的那些标记。带有data-marker =“showall”的单选按钮显示所有元素。

其余的应该是可以理解的，代码中有注释并使用ES2015。

let map, googleMarkers = {} // карта и объект содержащий объекты гугл маркеров
const radios = document.querySelectorAll('input[type=radio][data-marker]')
const myMarkers = { // описание маркеров
  first: {
    'Title 1': [52.4357808, 4.991315699999973],
  },
  second: { // имя группы
    options: { // опции для маркеров этой группы
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 
    }, 
    'Title 2': [52.4357808, 4.981315699999973],
    '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': [52.4055687, 5.039236599999994]
  }
}

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(map)
}

function setMarkers (map) {
  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
      const marker = new google.maps.Marker({
        title,
        position: {lat: myMarker[0], lng: myMarker[1]},
        map,
        visible,
        ...myMarkers[group].options // берет опции группы
      })
      
      googleMarkers[group] = googleMarkers[group] || [] // создает массив если его нет
      googleMarkers[group].push(marker)
    }
  }
}

function radioClick ({ target }) { // берет target события
  const group = target.dataset.marker // id группы к которой принадлежит радио-кнопка
  const arrOfEveryGroup = Object.values(googleMarkers) // массив массивов групп маркеров
  const everyMarker = [].concat.apply([], arrOfEveryGroup) // массив всех маркеров
  
  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)
}

#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="first" id="first" type="radio" name="myMarkers">
<label for="first">First</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">Show all</label>