Maps API 标记可见组的真/假

Question

我的 Maps API 中有几个（或分配）标记。所有这些标记都属于某个组，例如“家”。其中有些是可见的，有些则不是。我想使用 DOM 事件一次更改整组标记的可见真/假。一个 ONCLICK 按钮事件，调用一个特定的 JS。

到目前为止，我无法找到或想出任何方法来解决我的问题。我希望任何人都可以帮助我。

<div id="map" class="map"></div>
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: {lat: 52.0000, lng: 5.0000},
            mapTypeId: 'terrain'
        });

        var marker14 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: true
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API-KEY}&callback=initMap"></script>

回复@MrUpsidown

你的“onclick”按钮在哪里？

<a href="#" onclick="changeMenu(''),{!!!something-here!!}" id="nav-change" title="CHANGE"></a>

触发了什么功能？

单击此链接会更改我页面上的菜单，而我认为 {!!!something-here!!} 所在的位置应该是一个更改某个组的可见性的脚本。

如何将“许多”标记添加到地图中？

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: {lat: 52.0000, lng: 5.0000},
            mapTypeId: 'terrain'
        });

        var marker14 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: true
        });

        var marker16 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: false
        });

        var marker4 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'home',
            visible: true
        });

        var marker20 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'work',
            visible: true
        });

        var marker8 = new google.maps.Marker({
            position: {lat: 51.9135, lng: 4.4212},
            map: map,
            title: '2017-02-02 13:27:30',
            group: 'work',
            visible: false
        });
    }
</script>

你试过什么？

“我找不到或想出任何方法来解决我的问题。”

Answer 1

将每个标记添加到数组中。在按钮单击触发的函数中，循环遍历您的标记数组。对于每个标记，检查它是否属于您感兴趣的组，如果是，请致电setVisible(true)。

var markers = [];

function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 5,
    center: {
      lat: 53,
      lng: 4.5
    }
  });

  var marker1 = new google.maps.Marker({
    position: {
      lat: 51.9335,
      lng: 4.2212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'home',
    visible: false
  });

  var marker2 = new google.maps.Marker({
    position: {
      lat: 52.9135,
      lng: 4.1212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'home',
    visible: false
  });

  var marker3 = new google.maps.Marker({
    position: {
      lat: 53.9135,
      lng: 4.5212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'home',
    visible: true
  });

  var marker4 = new google.maps.Marker({
    position: {
      lat: 51.8835,
      lng: 4.9912
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'work',
    visible: true
  });

  var marker5 = new google.maps.Marker({
    position: {
      lat: 53.9135,
      lng: 5.4212
    },
    map: map,
    title: '2017-02-02 13:27:30',
    group: 'work',
    visible: false
  });

  markers.push(marker1);
  markers.push(marker2);
  markers.push(marker3);
  markers.push(marker4);
  markers.push(marker5);
}

function setHomeGroupVisible() {

  for (var i = 0; i < markers.length; i++) {

    if (markers[i].group === 'home') {

      markers[i].setVisible(true);
    }
  }
}

initMap();

#map-canvas {
  height: 150px;
}
button {
  margin-top: 15px;
  background: yellow;
}

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

<button onclick="setHomeGroupVisible()">
  Set Home Group Visible
</button>

<script src="//maps.googleapis.com/maps/api/js"></script>