javascript - 用于在 Google Maps API V3 中显示和隐藏行车 route 所有标记的复选框

Question

感谢您提供的任何帮助!我查看了这些链接，但无法将这些示例转化为我的代码的解决方案(我仍在学习很多关于 JS 和 Google map 的知识):

• What is the difference between "marker.setVisible(false)" and "marker.setMap(null)" in Google Maps v3?
• Toggle hide/show Google map markers ,
• http://www.raymondcamden.com/index.cfm/2012/12/1/Simple-Google-Maps-demo-with-Custom-Markers
• http://www.geocodezip.com/v3_MW_example_categories.html

我只想要一个复选框，当选中该复选框时，它会显示我的数组 (arrMarkers) 中的标记。当复选框未选中时，我希望能够将标记切换为隐藏。我不希望此代码影响我的行车 route 的标记。

下面是我最近的尝试。它不会导致任何错误，但复选框不会对标记执行任何操作:

    <script>
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

    function initialize() {
          CODE            
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          $.getJSON( "CODE", {}, function( data ) {
          CODE
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(CODE),
        map: map,
    });
    arrMarkers = marker;
    var infowindow = new google.maps.InfoWindow({
        content: "CODE"
    });
    arrInfoWindows = infowindow;
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    function MapAll () {
    if (document.getElementById("mapall").checked) {
          arrMarkers.setVisible(true);
          }
          else  {
          arrMarkers.setVisible(false);
          };
    }
    document.getElementById("mapall).onchange = MapAll;
    CODE
    </script>

** 编辑 1 **

通过用我点击添加的标记替换我的 JSON 对象(使用@bnz 的解决方案)，我能够让标记显示/隐藏。现在，我需要能够使用我的 JSON 对象添加标记。我更新的代码如下，但它给出了一个错误:“arrMarkers.push 不是一个函数”。当我删除那行代码时， map 会加载标记，但复选框不会执行任何操作。

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
      CODE

      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      var arrMarkers = [];

      $.getJSON( "CODE", {}, function( data ) {
      $.each( data, function( i, item ) {
      var loc = item.masterlocation;
            $("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
                map: map,
                title: loc.nickname,
            });
            arrMarkers = marker;
    arrMarkers.push(marker);

    function clearOverlays() {
      if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(null);
    }
      }
    }

    function showOverlays() {
      if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(map);
    }
      }
    }

    $('#mapall').change(function() {
     if($('#mapall').attr('checked')) {
      showOverlays();
      }
      else  {
      clearOverlays();
      }
    });
    });
    }

    function calcRoute() {
    CODE
    }

Answer 1

我会定义一个全局标记数组。

var arrMarkers = [];

然后通过推送将每个标记添加到数组中。

arrMarkers.push(marker);

隐藏功能

function clearOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(null);
    }
  }
}

显示函数

function showOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(map);
    }
  }
}

编辑:

看看这个 fiddle :

http://jsfiddle.net/iambnz/mNh7A (带 JQuery 1.4)

http://jsfiddle.net/iambnz/mNh7A/2/ (使用 JQuery 2)

编辑 2:

这是 JS 代码，JSfiddle 上的 HTML/CSS:http://jsfiddle.net/iambnz/jxzxF/

现在您只需将标记提供程序从手动添加/更改为 json 提要。

var directionsService = new google.maps.DirectionsService();
var map;
var arrMarkers = [];

function addMarker(location){
      marker = new google.maps.Marker({
      position: location,
      map: map
      });
arrMarkers.push(marker);
}

function clearOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(null);
    }
  }
}

function showOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(map);
    }
  }
}

$('#mapall').change(function() {
 if( $('#mapall').prop("checked")) {
          showOverlays();
          }
          else  {
          clearOverlays();
          }
});

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);

google.maps.event.addListener(map, 'click', function(event) 
      {
      addMarker(event.latLng);
      });      
}

$('#end').change( function(){
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
});

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