切换谷歌地图标记开/关

时间：2012-07-26 20:36:52

标签： javascript html map toggle markers

我希望使用切换标记来设置我的地图，这样当用户检查/取消选中地图下的一系列复选框时，无论选中哪个复选框，都会显示标记的类别，因此如果4个复选框中有3个是检查即：酒吧，学校，resturaunt，这些是显示类别的标记，如果有人取消选中第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 DYNAMIC 

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 DYNAMIC // GEO LOCATION SET CENTER和ERROR HANDLING 

        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 SET CENTER和ERROR HANDLING 

  }

  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

2 个答案:

答案 0 :(得分：2)

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

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

}

    for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {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 thisisgay =0; thisisgay < 1; thisisgay++) {category ="American";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Asian";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Deli - Cafe";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Ethnic";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Italian";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Mexican";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Seafood";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Sushi";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }

}

答案 1 :(得分：1)

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

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
}

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

相关问题
最新问题