地图 API 个组可见 true/false 个标记

Question

我的地图中有几个（或分配的）标记 API。所有这些标记都属于某个组，例如 'home'。其中有些是可见的，有些则不是。我想使用 DOM 事件一次更改整组标记的可见性 true/false。具体调用一个JS的ONCLICK按钮事件

到目前为止，我找不到或想出任何方法来解决我的问题。我希望有人能帮助我。

<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>

它触发了什么功能？

单击此 link 会更改我页面上的菜单，{!!!something-here!!} 我认为应该是一个脚本，可以更改特定组的可见性。

如何将 "many" 标记添加到地图？

<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>

你试过什么？

"I've unable to find or come up with any way of solving my problem."

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>

地图 API 个组可见 true/false 个标记

Maps API markers visible true/false of a group

javascript

onclick

google-maps-api-3

google-maps-markers

onclicklistener