如何使用一个按钮 show/hide google 地图上的一组标记

Question

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

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

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

变化：

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

收件人：

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

proof of concept fiddle

代码片段：

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>

Answer 2

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

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

如果您将 google 映射分配给一个全局变量，并在您的 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;
    }
  });
});

如何使用一个按钮 show/hide google 地图上的一组标记

How to show/hide an array of markers on google maps with one button

javascript

jquery

google-maps

google-maps-markers