在 Google Maps API 中隐藏和显示标记答案

【问题标题】：Hide and Show Markers in Google Maps API在 Google Maps API 中隐藏和显示标记
【发布时间】：2019-06-04 18:51:42
【问题描述】：

我需要帮助。我现在不擅长JS，你能给我解决办法吗？我需要使用复选框或按钮删除此标记。我正在尝试在互联网上找到解决方案，但我仍然不明白。希望大家能帮帮我，非常感谢。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=KEY"></script>

<script type="text/javascript">
//MARKER DATA FROM DB
var locations = [@foreach($kegiatan as $kegiatan)['{{$kegiatan->tanggal}}',{{$kegiatan->lat}},{{$kegiatan->lng}},'{{$kegiatan->gambar}}','{{$kegiatan->nama_tatanan}}','{{$kegiatan->nama_program}}','{{$kegiatan->pelaksanaan}}','{{$kegiatan->nama_kecamatan}}','{{$kegiatan->nama_kelurahan}}','{{$kegiatan->nama_kegiatan}}','{{$kegiatan->nama_indikator}}'],@endforeach];

function initialize() {
  //PUT THE MAP INTO DIV
  var mapDiv = document.getElementById('googft-mapCanvas');
  //INIT MAP
  var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(-6.390487,106.818807),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  });

//GIVE LAYER
  layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
      select: "col17",
      from: "1kKFhr-EJ8uWfHlnV3o6Iqzdu-NGosuZr30Phs3HW",
      where: ""
  },
  options: {
      styleId: 2,
      templateId: 2
  }
  });

  //MAKE VAR MARKER, URL
  var marker, i, infowindow;
  var assetUrl = '{{asset("img/kegiatan/")}}'

  function setMapOnAll(){
    for(i=0; i<locations.length; i++){
  //CREATE MARKER
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: "{{asset('img/marker/marker.png')}}",
  });

  //CREATE INFOWINDOW
  infowindow = new google.maps.InfoWindow();
  //CLICK FUNCTION FOR INFOWINDOW
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent('<div class="infowindow">'+ '<b> ' + locations[i][9] + '</b>' + '<p>' + locations[i][0] + '</p>' + '<img src="' + assetUrl + '/' + locations[i][3] + '">' + '<br><br><div><b>Nama Tatanan : </b>' + locations[i][4] + '</div><br><div><b>Nama Indikator : </b>' + locations[i][10] +  '</div><br><div><b>Nama Program : </b>'+ locations[i][5] + '<br><br><div><b>Nama Pelaksana : </b>'+ locations[i][6] + '</div><br><div><b>Nama Kecamatan : </b>'+locations[i][7]+'</div><br><div><b>Nama Kelurahan : </b>'+locations[i][8]+'</div></div>');
      infowindow.open(map, marker);
    }
  })(marker, i));
}
  }
  setMapOnAll();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

结果会是这样的

What it is looks like

【问题讨论】：

从您的问题中不清楚您要删除什么标记。您能否阐明复选框或按钮的位置，并确定您要删除的标记？
@Daniel 我正在尝试删除标记，对我来说，如果你想使用复选框或按钮，这取决于你:(

标签： javascript html css google-maps-api-3

【解决方案1】：

我不明白您的评论，但您可以将此 javascript 用于地图：

let map;
    map = new GMaps({
        el: '#map',
        center: new google.maps.LatLng(40.7127837, -74.0059413),
        zoom: 13,
        styles: [
            {
                "featureType":"water",
                "elementType":"geometry",
                "stylers":[{"color":"#e9e9e9"},{"lightness":17}]},
            {
                "featureType":"landscape",
                "elementType":"geometry",
                "stylers":[
                    {"color":"#f5f5f5"},
                    {"lightness":20}]},
            {
                "featureType":"road.highway",
                "elementType":"geometry.fill",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":17}]},
            {"featureType":"road.highway",
                "elementType":"geometry.stroke",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":29},{"weight":0.2}]},
            {"featureType":"road.arterial",
                "elementType":"geometry",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":18}]},
            {"featureType":"road.local",
                "elementType":"geometry",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":16}]},
            {"featureType":"poi",
                "elementType":"geometry",
                "stylers":[{"color":"#f5f5f5"},
                    {"lightness":21}]},
            {"featureType":"poi.park",
                "elementType":"geometry",
                "stylers":[{"color":"#dedede"},
                    {"lightness":21}]},     {"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},     {"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
    });
    let map_icon = 'assets/images/map-marker.png';
    map.addMarker({
        position: {lat: 40.7127837, lng: -74.0059413},
        lat: 40.7127837,
        lng: -74.0059413,
        title: 'New York',
        icon: map_icon,
        animation: google.maps.Animation.BOUNCE,
        details: {
            database_id: 42,
            author: 'HPNeo'
        },
        click: function(e){
            if(console.log)
                console.log(e);
            alert('You clicked in this marker');
        },
        mouseover: function(e){
            if(console.log)
                console.log(e);
        }
    });
 </pre>

希望对你有帮助

【讨论】：