Maps API标记可见的一组的是非 [英] Maps API markers visible true/false of a group

问题描述

我的Maps API中有几个(或分配)标记.所有这些标记都属于某个组，例如家".其中有些是可见的，有些则不可见.我想使用DOM事件一次更改整个标记组的可见true/false.一个ONCLICK按钮事件，它调用一个特定的JS.

I have a couple (or allot) markers in my Maps API. All these markers belong to a certain group, like 'home'. And some of them are visible and some are not. I wanna change the visible true/false of a whole group of markers at once using a DOM event. An ONCLICK button event that calls a JS to be specific.

到目前为止，我还无法找到或提出解决问题的任何方法.我希望有人能帮助我.

So far, I've unable to find or come up with any way of solving my problem. I hope anyone can help me out.

<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

In reply to @MrUpsidown

点击"按钮在哪里?

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

它触发什么功能?

单击此链接可以更改页面上的菜单，我认为{!!! something-here !!}所在的位置应该是可更改特定组的可见性的脚本.

Clicking in this link changes the menu on my page, and where {!!!something-here!!} is I think should be a script that changes the visibility of a certain group.

如何将许多"标记添加到地图?

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

推荐答案

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

Add every marker to an array. In the function triggered by the button click, loop through your markers array. For each marker, check if it belongs to the group you are interested in and if yes, call 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>

这篇关于Maps API标记可见的一组的是非的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！