时间戳

首页 > 解决方案 > 隐藏谷歌地图标记，直到被复选框激活

javascript - 隐藏谷歌地图标记，直到被复选框激活

问题描述

我设置了一个谷歌地图，它根据标记的类别过滤标记。但是，当您第一次登陆页面时，它们当前是可见的。一旦您触发了所有复选框过滤器，它们就会被隐藏。但是，我希望在您第一次登陆页面时隐藏标记，并且仅在由复选框过滤器触发时才可见。

这是我的代码：

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>

标签： javascriptjquerygoogle-maps

解决方案

如果您不希望在选中复选框之前显示标记，请在选中复选框之前不要将它们添加到地图中。

创建标记时，不要设置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>

推荐阅读