Google Maps API - トグルマーカーの可視性

Question

Google Maps APIのマーカーのサブセットの表示を切り替えるにはどうすればよいですか？

私は2組のマーカー位置データを持っています。ボタンを追加して、各セットの表示を個別に切り替えることができます。

便宜のため以下の完全なコード。私はヘッダーにボタンコードを持っています。

<button onclick="toggleMELocations()">Toggle ME Locations</button>` 

ボタンが表示されていますが、クリックすると期待通りの結果が得られません（MEの場所が消えています）。

関連する機能は「toggleMelocations」です。私は、MEの場所が現在見えている場合、それらを見えなくするように言いたいと思っています。およびその逆。

ご迷惑をおかけして申し訳ありません。

var map; 

function initMap() { 
map = new google.maps.Map(document.getElementById('map'), { 
zoom: 4, 
center: { 
    lat: 40, 
    lng: -95 
}, 
styles: [{ 
    stylers: [{ 
    saturation: -100 
    }] 
}] 
}); 

setMarkers(map); 
} 

function toggleMELocations() { 
if (MEs) { 
for (i in MEs) { 
    var visibility = (MEs[i].getVisible() == true) ? false : true; 
    MEs[i].setVisible(visibility); 
    } 
} 
} 

// MEC locations 
var MEs = [ 
['aaa', 36.07, -75.79], 
['bbb', 40.07, -83.79] 
]; 

// CC locations 
var Concentras = [ 
['xxx', 38.01, -75.55], 
['yyy', 30.10, -90.3] 
]; 

function setMarkers(map) { 
// Adds markers to the map. 

for (var i = 0; i < MEs.length; i++) { 
var ME = MEs[i]; 
var marker = new google.maps.Marker({ 
    position: { 
    lat: ME[1], 
    lng: ME[2] 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
    map: map, 
    title: ME[0] 

}); 
} 

for (var i = 0; i < Concentras.length; i++) { 
var Concentra = Concentras[i]; 
var marker = new google.maps.Marker({ 
    position: { 
    lat: Concentra[1], 
    lng: Concentra[2] 
    }, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', 
    map: map, 
    title: Concentra[0] 

}); 
} 
} 

Answer 1

最初にgetVisible()は有効な機能ではありません。

定義済みのグローバル変数を追加する必要があります。var addedMEs = []; これは、setMarkersメソッドでマップに追加されたマーカーの配列として機能します。その後、我々はそれが無効であるとしてgetVisible()方法を削除する必要が

for (var i = 0; i < MEs.length; i++) { 
    var ME = MEs[i]; 
    var marker = new google.maps.Marker({ 
     position: { 
     lat: ME[1], 
     lng: ME[2] 
     }, 
     icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     map: map, 
     title: ME[0] 

    }); 
    addedMEs.push(marker); 
    } 

：私たちは、上で定義された配列に オブジェクトを追加する行を含むようにsetMarkers方法を変更します。この行を次のように変更します。

var bounds = map.getBounds(); 
    var visibility = (bounds.contains(addedMEs[i].position) == true) ? false : true; 
    addedMEs[i].setVisible(visibility); 

：ここで

はしようとするJSFiddleある：https://jsfiddle.net/cmjcs5eL/13/