谷歌地圖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 - 打開/關閉標記組

回答

相關問題