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

你的＆＃34; onclick＆＃34;按钮？

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

它会触发什么功能？

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

你如何添加你的＆＃34;很多＆＃34;标记到地图？

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

您尝试了什么？

＆＃34;我无法找到或想出任何方法来解决我的问题。＆＃34;

Answer 1

将每个标记添加到数组中。在按钮单击触发的功能中，循环遍历您的markers数组。对于每个标记，检查它是否属于您感兴趣的组，如果是，请致电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标记可见组的真/假

1 个答案: