javascript - 打开/关闭谷歌地图标记

Question

我想用切换标记设置我的 map ，这样当用户选中/取消选中 map 下的一系列复选框时，选中的复选框就是显示的标记类别，因此如果 4 个复选框中有 3 个是检查即:酒吧、学校、餐厅，这些是按类别显示的标记，如果有人取消选中第 4 个标记或其中的任何数量，它们将“在意义上”变得不可见，这是行不通的，我看了一遍找不到任何有帮助的引用资料。我是 javascript 新手，精通 PHP。我将 locations[] 数组设置为 4 列，向下无限。所以我要得到它的位置[i][4]的“地点类型”……我已经在这里待了好几天了，我再也找不到更好的了。我尝试了所有我能想到的可能组合。就像我说的 。我是一名 PHP 脚本编写者。非常感谢任何帮助

<script type="text/javascript">
//PHP - Lat,Lng ARRAY
var locations = [
<?php
$x = 0; $i = 0; $j = 0; $y = 0; $z = 0; $a = 0; $b = 0; $c = 0;
for($aa = 0; $aa < $count; $aa++) {
$content = '<div class="coupon"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>'.$deal[$y].'</h1></strong><div class="ribbon-stitches-bottom"></div></div><div class="picture_coupon"><img src="'.$deal_photo[$b].'" width="150" height="100" /></div><div class="deal"><center><h1>'.$deal[$y].'</h1>'.$deal_info[$a].'<b>Expires: '.$deal_expiration[$c].'</b></center></div></div>';

echo "['" . $business_name[$x] . "'," . $lat[$i] . "," . $lng[$j] . "," . "'$content'" . ",".$type[$id]. "],";
$x++; $i++; $j++; $id++; $y++; $z++; $a++; $b++; $c++;
}
?>
['' , , ,'' , '']
];  
//PHP - Lat,Lng ARRAY 
  var map;

  function initialize() {
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

    // Try HTML5 geolocation
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

//反码 PHP 动态

var infowindow = new google.maps.InfoWindow();

var marker, i;


//Marker Icon Generation.. Will be changed WHEN make new colors
var blue = '../images/map-icons/blue.png';

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: blue // iconType[$num] 
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][3]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//反码 PHP 动态//地理位置设置中心和错误处理

        map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
    }
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
    }   

//GEO LOCATION 设置中心和错误处理

  }

  google.maps.event.addDomListener(window, 'load', initialize);

//=================ATTEMPT AT toggle Marker Checkbox

//== 显示特定类别的所有标记，并确保选中复选框 ==

  function show(category) {

    for (var i=0; i<locations.length; i++) {

      if (locations[i].mycategory == category) {

        locations[i].setVisible(true);

      }

    }

    // == check the checkbox ==

    document.getElementById(category+"box").checked = true;

  }



  // == hides all markers of a particular category, and ensures the checkbox is cleared ==

  function hide(category) {

    for (var i=0; i<locations.length; i++) {

      if (locations[i].mycategory == category) {

        locations[i].setVisible(false);

      }

    }

    // == clear the checkbox ==

    document.getElementById(category+"box").checked = false;

    // == close the info window, in case its open on a marker that we just hid

    infowindow.close();

  }



  // == a checkbox has been clicked ==

  function boxclick(box,category) {

    if (box.checked) {

      show(category);

    } else {

      hide(category);

    }

    // == rebuild the side bar

    makeSidebar();

  }  
 /*HTML*/<input type ="checkbox" name="resturauntbox" onclick="boxclick(this,'resturaunt')"><label></label>
     <input type ="checkbox" name="barbox" onclick="boxclick(this,'bar')"><label></label>

//==========================================复选框//HTML

Answer 1

我只是设置了一个带有变量的 php for 循环来捕获所有类别，一个用于打开它们，另一个用于隐藏它们。

function checkAll(field) {
  for (j = 0; j < field.length; j++) {
    field[j].checked = true;

  }

  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(true);
      }
    }
  }
}

function uncheckAll(field) {

  for (j = 0; j < field.length; j++) {
    field[j].checked = false;

  }

  for (var index = 0; index < 1; index++) {
    category = "American";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Asian";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Deli - Cafe";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Ethnic";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Italian";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Mexican";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Seafood";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
  for (var index = 0; index < 1; index++) {
    category = "Sushi";
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][4]) {
        markers[i].setVisible(false);
      }
    }
  }
}