如何使用一个按钮在谷歌地图上显示/隐藏一组标记

Question

尝试制作一个按钮来显示/隐藏地图上的标记。代码从位置数组中创建一组标记，并最初在地图上显示它们。当我单击按钮隐藏标记时，它会隐藏它们，但是当我再次单击它以显示标记时，它什么也不做。我只是一个初学者，但我已经坚持了很长时间。请帮忙。

var locations = [
	['1', 33.727190, -117.851863],
	['2', 34.094715, -117.773466],
	['3', 34.143758, -118.782985],
	['4', 33.732112, -117.845280],
	['5', 33.136157, -117.156101],
	['6', 33.875900, -118.034982],
	['7', 33.871597, -118.242668],
	['8', 33.979397, -118.047032],
	['9', 33.710725, -117.859015]
    ];
    var locationsMarkers = [];
    function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 34.052234, lng: -118.243685},
		zoom: 8
	});
	setMapOnLocations(map)
    }
    function setLocations(locations) {
	for (var i = 0; i < locations.length; i++) {
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1],locations[i][2]),
			map: map
		});
		locationsMarkers.push(marker);
	}
}

function setMapOnLocations(map) {
	setLocations(locations);
	for (var i = 0; i < locationsMarkers.length; i++) {
		locationsMarkers[i].setMap(map);
	}
}

function clearLocations() {
	setMapOnLocations(null);
}

function showLocations() {
	setMapOnLocations(map);
}

$(document).ready(function(){
	var x = false;
	$("#button").on('click', function(){
		if (!x){
			clearLocations()
			x = true;
		}
		else {
			showLocations()
			x = false;
		}
	});
});

Answer 1

您在第二次单击该按钮时调用showLocations()，这实际上与调用setMapOnLocations(map) 相同。 map 在 DOM 就绪函数的闭包或上下文中未定义，因此您可以有效地将地图在所有位置上设置为未定义。

在您的代码中，map 不是全局变量。它只在一个闭包中定义，函数initMap。您在该函数中将其传递给setMapOnLocations，这就是位置首先显示的原因，但是一旦initMap 完成，您就会丢失谷歌地图的实例。

如果你将谷歌地图分配给一个全局变量，并在你的showLocations 中使用它，那么其他一切都应该像你一样工作。

换句话说，是这样的：

var googleMap;  // make the google map instance have global scope

var locations = [
  ['1', 33.727190, -117.851863],
  ['2', 34.094715, -117.773466],
  ['3', 34.143758, -118.782985],
  ['4', 33.732112, -117.845280],
  ['5', 33.136157, -117.156101],
  ['6', 33.875900, -118.034982],
  ['7', 33.871597, -118.242668],
  ['8', 33.979397, -118.047032],
  ['9', 33.710725, -117.859015]
];

var locationsMarkers = [];

function initMap() {
  // assign the google map instance to the global variable
  googleMap = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 34.052234, lng: -118.243685},
    zoom: 8
  });
  setMapOnLocations(googleMap); 
}

function setLocations(locations) {
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1],locations[i][2]),
      map: map // map is undefined here, so this is superfluous
    });
    locationsMarkers.push(marker);
  }
}

function setMapOnLocations(map) {
  setLocations(locations);
  for (var i = 0; i < locationsMarkers.length; i++) {
    locationsMarkers[i].setMap(map);
  }
}

function clearLocations() {
  setMapOnLocations(null);
}

function showLocations() {
  setMapOnLocations(googleMap);  // use the global instance of the google map
}

$(document).ready(function(){
  var x = false;
  $("#button").on('click', function(){
    if (!x){
      clearLocations()
      x = true;
    }
    else {
      showLocations()
      x = false;
    }
  });
});

Answer 2

您的 map 变量是 initMap 函数的本地变量。要在 HTML 点击监听器中使用它，它需要在全局范围内。

变化：

function initMap() {
  var map = new google.maps.Map(...)

收件人：

var map;
function initMap() {
  map = new google.maps.Map(...)

proof of concept fiddle

代码 sn-p：

var locations = [
  ['1', 33.727190, -117.851863],
  ['2', 34.094715, -117.773466],
  ['3', 34.143758, -118.782985],
  ['4', 33.732112, -117.845280],
  ['5', 33.136157, -117.156101],
  ['6', 33.875900, -118.034982],
  ['7', 33.871597, -118.242668],
  ['8', 33.979397, -118.047032],
  ['9', 33.710725, -117.859015]
];
var map;
var locationsMarkers = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 34.052234,
      lng: -118.243685
    },
    zoom: 8
  });
  setMapOnLocations(map)
}

function setLocations(locations) {
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });
    locationsMarkers.push(marker);
  }
}

function setMapOnLocations(map) {
  setLocations(locations);
  for (var i = 0; i < locationsMarkers.length; i++) {
    locationsMarkers[i].setMap(map);
  }
}

function clearLocations() {
  setMapOnLocations(null);
}

function showLocations() {
  setMapOnLocations(map);
}

$(document).ready(function() {
  var x = false;
  $("#button").on('click', function() {
    if (!x) {
      clearLocations()
      x = true;
    } else {
      showLocations()
      x = false;
    }
  });
});
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="toggle" />
<div id="map"></div>