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

Question

我希望使用切换标记设置我的地图，以便当用户选中/取消选中地图下的一系列复选框时，选中的复选框是显示的标记类别，因此如果选中了 4 个复选框中的 3 个，即：酒吧、学校、餐厅，这些是按类别显示的标记，如果有人取消选中第 4 个标记或其中任意数量的标记，它们将“在某种意义上”变得不可见，这是行不通的，我翻遍了，找不到任何有帮助的参考资料。我是 javascript 新手，并且精通 PHP。我将位置 [] 数组设置为 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.';
    }

// 地理位置设置中心和错误处理

  }

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

//=================ATTEMPT AT 切换标记复选框

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

  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>

//=============================================CHECKBOX //HTML

score 2 · Accepted Answer

我只是设置了一个带有变量的 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);
      }
    }
  }
}

score 1 · Accepted Answer

无意冒犯，但这是一个非常令人困惑的问题。但是，只是离开标题，您似乎想要添加和删除标记。要添加标记，您可以使用以下内容：

var marker = new google.maps.Marker({
    position: map.getCenter(), // center marker in map
    map: map,
    shadow: shadow, // MarkerImage type
    icon: image // MarkerImage type
});

然后，当您想从地图中删除标记时，可以使用以下命令：

marker.setMap(null);

因此，您可以创建一个函数来打开和关闭标记，如下所示：

function toggleMarker(marker, map) {
    if (marker.getMap() == null)
        marker.setMap(map); // marker isn't visible on map, so make it visible
    else
        marker.setMap(null); // marker is visible on map, so make it invisible
}

如果这不是你想要的，我很抱歉。我发现很难理解你的问题。

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

2 回答 2

Related

Reference