Javascript 映射组中可见的真/假API标记

我有一对夫妇或分配标记在我的地图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按钮在哪里

它触发什么功能

单击此链接将更改我页面上的菜单，其中{！！！something here！！}我认为应该是一个脚本，用于更改某个组的可见性

如何将多个标记添加到地图中

你试过什么

---

我无法找到或想出任何解决问题的方法。

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

var标记=[]； 函数初始化映射{ var map=new google.maps.Mapdocument.getElementById'map-canvas'{ 缩放：5， 中心：{ 拉丁美洲：53， 液化天然气：4.5 } }; var marker1=新的google.maps.Marker{ 职位：{ 拉脱维亚：51.9335， 液化天然气：4.2212 }, 地图：地图， 标题：“2017-02-02 13:27:30”， 小组:"家",， 可见：假 }; var marker2=新的google.maps.Marker{ 职位：{ 拉脱维亚：52.9135， 液化天然气：4.1212 }, 地图：地图， 标题：“2017-02-02 13:27:30”， 小组:"家",， 可见：假 }; var marker3=新的google.maps.Marker{ 职位：{ 拉脱维亚：53.9135， 液化天然气：4.5212 }, 地图：地图， 标题：“2017-02-02 13:27:30”， 小组:"家",， 可见：正确 }; var marker4=新的google.maps.Marker{ 职位：{ 拉脱维亚：51.8835， 液化天然气：4.9912 }, 地图：地图， 标题：“2017-02-02 13:27:30”， 小组:"工作",， 可见：正确 }; var marker5=新的google.maps.Marker{ 职位：{ 拉脱维亚：53.9135， 液化天然气：5.4212 }, 地图：地图， 标题：“2017-02-02 13:27:30”， 小组:"工作",， 可见：假 }; markers.pushmarker1； markers.pushmarker2； markers.pushmarker3； markers.pushmarker4； markers.pushmarker5； } 函数setHomeGroupVisible{ 对于变量i=0；i请提供一份允许复制该问题的报告。如何将多个标记添加到地图中，onclick按钮在哪里，它触发了什么功能，您尝试了什么？等等。如果将每个标记添加到完全相同的位置，则很难判断它们是否可见……在本例中，标记位于相同的位置是我的错！它们都有不同的坐标：DThanks！我只是让它为我的代码工作。为调用脚本制作了一个var而不是home，这样我就可以决定哪个按钮调用哪个组。

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

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