谷歌地图使用复选框显示和隐藏标记

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 函数并设置真假：

 $('#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;


}

}