Question

我目前正在尝试使用带有一堆标记的Google地图（从JSON数据文件中提取）。我希望能够将标记分为两类，并能够将它们关闭或打开。

我已经到了地图工作的地步，指针显示，开关按钮正在点亮和关闭 - 现在剩下的就是将标记添加到组并将开关按钮绑定到显示/隐藏地图上的标记。

我知道我可以使用marker.setVisible(false/true)，但我不确定如何或在何处使用它。

我是使用Google Maps API v3的新手，因此我们非常感谢您的任何指示。

到目前为止，我已经设置了一个小提琴，你可以在这里看到它：https://jsfiddle.net/6n25g3n7/4/

Answer 1

您需要让markers变量访问您的点击事件。

代码示例：

var markers = [];

function addMarkerToMap(map, markerData){
    for(var i = 0; i < markerData.length; i++){    
      // init marker

      markers.push(marker);  //push to marker's array
    }
}

function clickEvent(){
    for(var key in markers){
        markers[key].setVisible(true/false);

    }
}

小提琴：https://jsfiddle.net/6n25g3n7/5/抱歉代码有点乱。

如果您对代码有任何疑问，请发表评论：）

Answer 2

这个标记打开和关闭两个标记。检查jsfiddle是否有所有更改。我不得不重新构建你的一些代码。

function createSwitches(markers){
    var html = '<div class="switches"><span class="switch-title">Show Me</span></div>';

    // ADD YOU SWITCHES HERE! 
    // Make sure the same order as the google markers
    var all_switches = [
        { 
            html: '<span class="whats-on-wrapper"><span data-target="whats-on" class="switch switch-on">Item Group 2</span></span>',
        },
        {
            html: '<span class="stand-wrapper"><span data-target="stand" class="switch switch-on">Item Group 1</span></span>',
        }
    ];

    // Add the main bar element  
    $('.map-container').prepend(html);

    // Loop through all your switches and add them 
    // with the event
    for (var i = 0; i < all_switches.length; i++) {

        var element = $(all_switches[i]["html"]);

        (function(index, element, markers) {
            $(element).on('click',  function () {
            var this_marker = markers[index];
            var current = String(this_marker.visible);
            var toggle  = ( current === "true") ? false : true;

            this_marker.setVisible(toggle);

            });
        })(i, element, markers)


        $('.switches').append($(element))
    }

    // Set the toggle animation
    $('.switches .switch').click(function(){
        $(this).toggleClass('switch-on');
        $(this).toggleClass('switch-off');
    });
}

https://jsfiddle.net/6n25g3n7/8/

Google Maps V3 - 打开/关闭标记组

2 个答案: