Google Maps API，隐藏/显示标记答案

【问题标题】：Google Maps API, hide/show markersGoogle Maps API，隐藏/显示标记
【发布时间】：2012-11-08 01:46:02
【问题描述】：

我是 JavaScript 新手，但是这个问题已经让我发疯了两天，我找不到和我有同样问题的人。

我正在尝试添加一个按钮来隐藏我的地图上的所有标记（最终我想这样做以便我按类别隐藏标记，但暂时隐藏所有标记就可以了）我正在使用代码来自 Google 开发者网站。

这是我的代码

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(49.2755189938682, -123.1185996613159);

  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 17
  });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['atm','bus_station','parking']
  };

  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
  TestMarker();
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

function TestMarker() {
       CentralPark = new google.maps.LatLng(49.2755189938682, -123.1185996613159);
       addMarker(CentralPark);
}

function addMarker(location) {
    marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/POI.png",
        title: 'Sues Party, Idaburn Salon' 
    });
}

function createMarker(place) {

    var iconType = {};
    iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png";
    iconType['bus_station'] =     "http://maps.google.com/mapfiles/ms/micons/bus.png";
    //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png";
    iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png";
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      icon: iconType[place.types[0]],
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

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

我添加了一个按钮来调用function，但我认为问题在于从数组中获取记录。真的卡住了，非常感谢任何帮助。甚至建议我需要做什么才能让它工作

詹姆斯

【问题讨论】：

标签： jquery google-maps-api-3 google-maps-markers

【解决方案1】：

詹姆斯。试试这个代码：

<html>
  <head>
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=adsense,places"></script>
    <script type="text/javascript">
      var map;
      var service;
      var infowindow;
      var markers = [];

      function initialize() {
        var pyrmont = new google.maps.LatLng(49.2755189938682, -123.1185996613159);

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          center : pyrmont,
          zoom : 17
        });

        var request = {
          location : pyrmont,
          radius : '500',
          types : ['atm', 'bus_station', 'parking']
        };
        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
        TestMarker();

        var removeBtn = document.getElementById("removeBtn");
        google.maps.event.addDomListener(removeBtn, "click", onRemoveBtn_Clicked);
      }

      function onRemoveBtn_Clicked() {
        var i;
        for (i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            var place = results[i];
            markers.push(createMarker(results[i]));
          }
        }
      }

      function TestMarker() {
        CentralPark = new google.maps.LatLng(49.2755189938682, -123.1185996613159);
        markers.push(addMarker(CentralPark));
      }

      function addMarker(location) {
        marker = new google.maps.Marker({
          position : location,
          map : map,
          icon : "http://maps.google.com/mapfiles/ms/micons/POI.png",
          title : 'Sues Party, Idaburn Salon'
        });
        return marker;
      }

      function createMarker(place) {
        var iconType = {};
        iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png";
        iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png";
        //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png";
        iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png";
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map : map,
          icon : iconType[place.types[0]],
          position : place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });

        return marker;
      }


      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
      code.prettyprint {
        display: block;
        border: 1px solid #ccc;
        margin-bottom: 1em;
      }
      #map {
        width: 100%;
        height: 500px;
        margin: 0;
      }

    </style>
  </head>
  <body>
    <input type="button" id="removeBtn" value="Remove all markers" />
    <div id="map"></div>
  </body>
</html>

【讨论】：

【解决方案2】：

您需要做的就是创建一个全局变量来保存所有标记。从结果中一一添加它们，您可以全部显示/隐藏它们。例如：

<script type="text/javascript">

    var markers = [];

    function HideAllMarkers() {
        for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(null);
        }
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
                createMarker(results[i],i);
            }
        }
    }

    function createMarker(place, index) {
        var iconType = {};
        iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png";
        iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png";
        //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png";
        iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png";
        var placeLoc = place.geometry.location;
        markers[index] = new google.maps.Marker({
            map: map,
            icon: iconType[place.types[0]],
            position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
        });
    }
</script>

如果要显示所有标记，则应执行以下操作：

<script type="text/javascript">
    function ShowAllMarkers() {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }
</script>

【讨论】：