Google Maps API:如何显示隐藏的标记?

时间:2016-08-17 02:36:41

标签: javascript google-maps google-maps-api-3

我遵循官方API文档,并提出了类似的功能:

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

但是,我正在尝试编写一个可以“取消隐藏”某些标记的函数,但是我找不到有关撤消此操作的任何文档。我怎么能做到这一点?

2 个答案:

答案 0 :(得分:0)

我相信您只需在要展示的标记上调用setMap(),然后将google.maps.Map而不是null的实例传递给它。

答案 1 :(得分:0)

map变量需要位于全局范围内(HTML click侦听器函数在全局范围内运行)。

proof of concept fiddle with global map variable

代码段

// global variables
var map;
var markers = [];

function initialize() {
  // initialize global map variable
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker1 = new google.maps.Marker({
    map: map,
    position: map.getCenter()
  });
  markers.push(marker1);
  var marker2 = new google.maps.Marker({
    map: map,
    position: {
      lat: 37.4529598,
      lng: -122.1817252
    }
  })
  markers.push(marker2);
}
google.maps.event.addDomListener(window, "load", initialize);

function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" onclick="setMapOnAll(null);" value="hide" />
<input type="button" onclick="setMapOnAll(map);" value="show" />
<div id="map_canvas"></div>