谷歌地图V3 - 打开/关闭标记组

-2

我目前正试图使用谷歌地图上的一堆标记（从JSON数据文件中提取）。我希望能够将标记分为两类中的一类，并能够将它们关闭或打开。谷歌地图V3 - 打开/关闭标记组

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

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

我是使用Google Maps API v3的新手，所以任何方向与此将不胜感激。

我已经设置与我有什么到目前为止小提琴，你可以在这里看到：https://jsfiddle.net/6n25g3n7/4/

来源

2016-06-07 PavKR

你需要让你的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/对不起代码是有点乱。

如果您对代码有任何疑问，请评论:)

来源

2016-06-07 06:49:44 weigreen

嗨Weigreen，感谢您的答复 - 我检查了小提琴，但它是完全一样的我一个，有没有变化:( – PavKR

@thePav对不起更新的链接:) – weigreen

真棒！，感谢那！现在有没有办法将标记分组并将它们绑定到它们的开关？ – PavKR

这其中有两个标记打开和关闭。检查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/

来源

2016-06-07 07:25:15 wot

Hi e4en将它们作为目标，感谢您的回复。我最终会有更多的地图指针，所以我不能仅仅通过数组键来定位它们。 – PavKR

@thePav完成。只要确保你以相同的顺序添加谷歌标记。然后将你的html添加到数组中，你很好。如果这是一切，请接受答案。 – wot

我将有2组可能包含多达20个标记，每个标记将从CMS帖子类型（Wordpress）馈送到脚本。我只需要打开和关闭组，而不是单个标记。没有办法知道确切的顺序。 – PavKR

谷歌地图V3 - 打开/关闭标记组

回答

相关问题