谷歌地圖使用複選框顯示和隱藏標記

Question

如何使用JavaScript和谷歌地圖顯示和隱藏標記？

我想用複選框來顯示和隱藏標記，當時我有兩個標記和三個複選框。一個顯示並隱藏所有和其他顯示和隱藏每個標記。我不知道如何將它們連接到複選框並分別顯示/隱藏它們。

樣品我使用的是標記：

var Jorvik = createMarker({ 
     position: {lat: 53.95697, lng: -1.08100}, 
    map: map, 
     icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}, 
      "<h1>JORVIK Viking Centre</h1><p>This is the home marker.<br/>test</p>"); 

codepen：https://codepen.io/mike43237/pen/qmEVLE

Answer 1

您可以使用標記setVisible(true/false)方法 Working Fiddle

看到toggleGroup（）函數

Answer 2

使用marker.setVisible函數並設置true或false：

$('#your_checkbox_id').change(function() {  
    Jorvik.setVisible($(this).is(":checked"));    
}); 

創建谷歌地圖：

iMap.initialize('map'); 
var Jorvik = iMap.markerCreate('title', 53.95697, -1.08100,true); 

自定義類谷歌地圖（你可以設置你的選項）：

var iMap = { 
marker: null, 
initialize: function(mapElementId) { 
    var mapOptions = { 
     zoom: 15, 
     streetViewControl: this.streetViewControl, 
     scrollwheel: this.scrollwheel, 
     navigationControl: this.navigationControl, 
     minZoom: this.minZoom, 
     maxZoom: this.maxZoom, 
     center: new google.maps.LatLng(53.95697, -1.08100), 
     mapTypeId: 'Styled', 
     mapTypeControlOptions: { 
      mapTypeIds: ['Styled', google.maps.MapTypeId.HYBRID] 
     } 
    };    
    var styelMap = [ 
     { 
      featureType: 'poi', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: -100 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     }, { 
      featureType: 'landscape', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: -100 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     }, { 
      featureType: 'transit', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: 0 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     }, { 
      featureType: 'administrative', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: 0 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     } 
    ]; 

    this.map = new google.maps.Map(document.getElementById(mapElementId), mapOptions); 
    this.map.mapTypes.set('Styled', new google.maps.StyledMapType(styelMap, { name: 'Compact map' }));  

}, 
markerCreate: function (title, lat, lng ,draggable ) {    
    this.marker= new google.maps.Marker({ 
      map: this.map, 
      title: title, 
      position: new google.maps.LatLng(lat, lng), 
      animation: google.maps.Animation.DROP, 
      draggable: draggable 

     });  
    google.maps.event.addListener(pin, "drag", function() { 
     // $('#lat').html(pin.position.lat()); 
     // $('#lng').html(pin.position.lng()); 
    }); 

    return this.marker; 


} 

}