Скрыть маркеры карты Google, пока не активируется флажок - PullRequest
Новая
       1

Скрыть маркеры карты Google, пока не активируется флажок

0 голосов
/ 23 января 2020

У меня настроена карта Google, которая фильтрует маркеры в зависимости от их категории. Однако они в настоящее время видны, когда вы впервые попадаете на страницу. После запуска всех фильтров-флажков они будут скрыты. Однако я хотел бы, чтобы маркеры были скрыты, когда вы впервые попадаете на страницу, и они видны только при срабатывании фильтра-флажка.

Вот мой код: 

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'Apple', 51.514227, -0.142056, 'shopping'],
    ['1', 'Title 1', 51.512424, -0.147783, 'hotels'],
    ['2', 'Title 2', 51.512164, -0.144521, 'culture'],
    ['3', 'Title 3', 51.511697, -0.144113, 'foodanddrink'],
    ['4', 'Title 4', 51.511817, -0.143566, 'shopping']
];

mp = [
    ['0', 51.512187, -0.144769, 'shopping']
];

/**
 * Function to init map
 */
function initialize() {
    var center = new google.maps.LatLng(51.5117389, -0.1452168);
    var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(51.5117389, -0.1452168),
        mapTypeId: 'roadmap',
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }

    for (i = 0; i < mp.length; i++) {
        addMp(mp[i]);
    }
}

/**
 * Add Main Point Marker
 */
function addMp(marker) {
    var pos = new google.maps.LatLng(marker[1], marker[2]);
    var content = marker[1];

    var icon = {
        url: "../images/mp-marker.svg",
        scaledSize: new google.maps.Size(60, 60), 
        anchor: new google.maps.Point(30, 30) 
    };

    marker1 = new google.maps.Marker({
        position: pos,
        map: map,
        icon: icon,
        zIndex: 9999,
    }); 
}


/**
 * Function to add markers to map
 */
function addMarker(marker) {
    var tip = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];

    var icon = {
        url: "../images/map-marker.svg",
        scaledSize: new google.maps.Size(30, 30), 
        anchor: new google.maps.Point(15, 15) 
    };

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        tip: tip,
        map: map,
        icon: icon
    }); 

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
        return function() {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            //map.panTo(this.getPosition());
            //map.setZoom(17);
        }
    })(marker1, content));
}


var tipovi = document.getElementsByClassName('chk-btn').value;

var selectAllChecked = function() {
    var checkedPlace = [] 
    var allCheckedElem = document.getElementsByName('filter');
    for (var i = 0; i < allCheckedElem.length; i++) {
        if (allCheckedElem[i].checked == true) {
            checkedPlace.push(allCheckedElem[i].value)//creating array of checked items
        }
    }
    filterChecker(checkedPlace) //passing to function for updating markers
}

var filterChecker = function(tip) {
    for (i = 0; i < markers1.length; i++) {

        marker = gmarkers1[i];

        if (in_array(this.marker.tip, tip) != -1) {
            marker.setVisible(true);
        } else {
         marker.setVisible(false);
        }
    }
}
// Init map
initialize();

function in_array(needle, haystack) {
    var found = 0;
    for (var i = 0, len = haystack.length; i < len; i++) {
        if (haystack[i] == needle) return i;
        found++;
    }
    return -1;
}

HTML : 

<ul class="map-nav">
          <li class="map-nav__item js-fade-in-up">
            <label class="switch">
              <span>Shopping</span>
              <input id="shopping-item" type="checkbox" name="filter" value="shopping" class='chk-btn' onclick="selectAllChecked();">
              <div class="slider round"></div>
            </label>
          </li>
          <li class="map-nav__item js-fade-in-up">
            <label class="switch">
              <span>Food and drink</span>
              <input id="food-item" type="checkbox" name="filter" value="foodanddrink" class='chk-btn' onclick="selectAllChecked();">
              <div class="slider round"></div>
            </label>
          </li>
          <li class="map-nav__item js-fade-in-up">
            <label class="switch">
              <span>Hotels</span>
              <input id="hotels-item" type="checkbox" name="filter" value="hotels" class='chk-btn' onclick="selectAllChecked();">
              <div class="slider round"></div>
            </label>
          </li>
          <li class="map-nav__item js-fade-in-up">
            <label class="switch">
              <span>Culture</span>
              <input id="culture-item" type="checkbox" name="filter" value="culture" class='chk-btn' onclick="selectAllChecked();">
              <div class="slider round"></div>
            </label>
          </li>
        </ul>

1 Ответ

2 голосов
/ 23 января 2020

Если вы не хотите, чтобы ваши маркеры отображались до тех пор, пока флажок не установлен, не добавляйте их на карту, пока флажок не установлен.

Когда вы создаете маркер, не установите свойство map. 

function addMarker(marker) {
  // snip (start of function)

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        tip: tip,
        icon: icon
    }); 
   // rest of function

Когда функция фильтра показывает маркер, добавьте его или удалите его с карты: 

var filterChecker = function(tip) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        if (in_array(this.marker.tip, tip) != -1) {
          marker.setMap(map);
        } else {
          marker.setMap(null);
        }
    }
}

подтверждение концепции скрипта

фрагмент кода: 

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});

// Our markers
markers1 = [
  ['0', 'Apple', 51.514227, -0.142056, 'shopping'],
  ['1', 'Title 1', 51.512424, -0.147783, 'hotels'],
  ['2', 'Title 2', 51.512164, -0.144521, 'culture'],
  ['3', 'Title 3', 51.511697, -0.144113, 'foodanddrink'],
  ['4', 'Title 4', 51.511817, -0.143566, 'shopping']
];

mp = [
  ['0', 51.512187, -0.144769, 'shopping']
];


/**
 * Function to init map
 */

function initialize() {
  var center = new google.maps.LatLng(51.5117389, -0.1452168);
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(51.5117389, -0.1452168),
    mapTypeId: 'roadmap',
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);

  }

  for (i = 0; i < mp.length; i++) {
    addMp(mp[i]);
  }
}

/**
 * Add Main Point Marker
 */
function addMp(marker) {
  var pos = new google.maps.LatLng(marker[1], marker[2]);
  var content = marker[1];

  var icon = {
    url: "http://maps.google.com/mapfiles/ms/micons/green.png",
    scaledSize: new google.maps.Size(60, 60),
    anchor: new google.maps.Point(30, 30)
  };

  marker1 = new google.maps.Marker({
    position: pos,
    map: map,
    icon: icon,
    zIndex: 9999,
  });
}


/**
 * Function to add markers to map
 */
function addMarker(marker) {
  var tip = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  var icon = {
    url: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    scaledSize: new google.maps.Size(30, 30),
    anchor: new google.maps.Point(15, 15)
  };

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    tip: tip,
    //        map: map,
    icon: icon
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      //map.panTo(this.getPosition());
      //map.setZoom(17);
    }
  })(marker1, content));
}


var tipovi = document.getElementsByClassName('chk-btn').value;

var selectAllChecked = function() {
  var checkedPlace = []
  var allCheckedElem = document.getElementsByName('filter');
  for (var i = 0; i < allCheckedElem.length; i++) {
    if (allCheckedElem[i].checked == true) {
      checkedPlace.push(allCheckedElem[i].value) //creating array of checked items
    }
  }
  filterChecker(checkedPlace) //passing to function for updating markers
}

var filterChecker = function(tip) {
  for (i = 0; i < markers1.length; i++) {
    marker = gmarkers1[i];
    if (in_array(this.marker.tip, tip) != -1) {
      marker.setMap(map);
    } else {
      marker.setMap(null);
    }
  }
}
// Init map
initialize();

function in_array(needle, haystack) {
  var found = 0;
  for (var i = 0, len = haystack.length; i < len; i++) {
    if (haystack[i] == needle) return i;
    found++;
  }
  return -1;
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map-canvas {
  height: 70%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<ul class="map-nav">
  <li class="map-nav__item js-fade-in-up">
    <label class="switch">
      <span>Shopping</span>
      <input id="shopping-item" type="checkbox" name="filter" value="shopping" class='chk-btn' onclick="selectAllChecked();">
      <div class="slider round"></div>
    </label>
  </li>
  <li class="map-nav__item js-fade-in-up">
    <label class="switch">
      <span>Food and drink</span>
      <input id="food-item" type="checkbox" name="filter" value="foodanddrink" class='chk-btn' onclick="selectAllChecked();">
      <div class="slider round"></div>
    </label>
  </li>
  <li class="map-nav__item js-fade-in-up">
    <label class="switch">
      <span>Hotels</span>
      <input id="hotels-item" type="checkbox" name="filter" value="hotels" class='chk-btn' onclick="selectAllChecked();">
      <div class="slider round"></div>
    </label>
  </li>
  <li class="map-nav__item js-fade-in-up">
    <label class="switch">
      <span>Culture</span>
      <input id="culture-item" type="checkbox" name="filter" value="culture" class='chk-btn' onclick="selectAllChecked();">
      <div class="slider round"></div>
    </label>
  </li>
</ul>
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...