只能在 Google Map API v3 上切换标记一次答案

【问题标题】：Can only toggle marker once on Google Map API v3只能在 Google Map API v3 上切换标记一次
【发布时间】：2015-11-21 03:46:05
【问题描述】：

我使用 Google Map API v3 设置了一个简单的 Google Map 界面，并希望实现一个可以切换标记的功能，但它无法正常工作。关闭图层后无法开启。

var request;
var places;
var map;
var markers = [];
var myLatLng = {lat: 34, lng: 38};

// load database and parse into entries
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'places.json');
request.onreadystatechange = function() {
    if ((request.readyState ===4) && (request.status===200)) {
        places = JSON.parse(request.responseText);
        initMap();
        console.log(places);
    }
}
request.send();

function initMap() {
    // map options
    var mapOptions = {
        zoom: 6,
        center: myLatLng,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    // initialise the map
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    // add markers
    for (var i = 0; i < places.length; i++) {
        // the place
        var place = places[i];
        // place co-ordinates
        var latlng = new google.maps.LatLng(place.latitude, place.longitude);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map, 
            title: place.city
        });
        markers.push(marker);
        var infowindow = new google.maps.InfoWindow;
        google.maps.event.addListener(marker, 'click', (function(marker){ 
            return function() {
                infowindow.open(map,marker);
            };
        })(marker));
    }
}

function toggleMarkers() {
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].getMap() === null) {
            markers[i].setMap(map);
        } else {
            console.log(markers[0].setMap())
            markers[i].setMap(null);
        }
    }
}

正在 HTML 中调用 ToggleMarkers 函数。

<!DOCTYPE html>
<head>
    <!-- scripts -->
    <script src="script2.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key="API Key"&callback=initMap"></script>
</head>
<body>
    <div id="panel">
      <button onclick="toggleMarkers()">Toggle Markers</button>
    </div>
    <div id="map"></div>
</body>
</html>

【问题讨论】：

你在哪里将标记添加到markers 数组？
发布的代码 (Uncaught ReferenceError: content is not defined) 中存在 javascript 错误。请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。
@geocodezip，抱歉我的错误，我刚刚更新了文件，但它只能工作一次。
Toggle kml-Layer on styled map only works once的可能重复
Overlay with Google Maps API v3 not reappearing after hide的可能重复

标签： javascript google-maps-api-3 marker

【解决方案1】：

您的 map 变量是您的 initMap 函数的本地变量。

改变这个：

function initMap() {
  // map options
  var mapOptions = {
      zoom: 6,
      center: myLatLng,
      mapTypeControl: true,
      mapTypeId: google.maps.MapTypeId.HYBRID
  };
  // initialise the map
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

收件人：

function initMap() {
    // map options
    var mapOptions = {
        zoom: 6,
        center: myLatLng,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    // initialise the global map variable
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

proof of concept fiddle

代码 sn-p：

var request;
var places;
var map;
var markers = [];
var myLatLng = {
  lat: 34,
  lng: 38
};

function initMap() {
  var mapOptions = {
    zoom: 6,
    center: myLatLng,
    mapTypeControl: true,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  // initialise the map
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  // add markers
  for (var i = 0; i < places.length; i++) {
    // the place
    var place = places[i];
    // place co-ordinates
    var latlng = new google.maps.LatLng(place.latitude, place.longitude);
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title: place.city
    });
    var infowindow = new google.maps.InfoWindow();
    var content = place.city + "<br>" + latlng.toUrlValue(6);
    google.maps.event.addListener(marker, 'click', (function(marker, content) {
      return function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content));
    markers.push(marker);
  }
}

function toggleMarkers() {
  for (var i = 0; i < markers.length; i++) {
    if (markers[i].getMap() === null) {
      markers[i].setMap(map);
    } else {
      markers[i].setMap(null);
    }
  }
}
google.maps.event.addDomListener(window, "load", initMap);
// load database and parse into entries
// store all entires as in var "places"
var places = [{
  city: "Lebanon",
  latitude: 33.854721,
  longitude: 35.862285
}, {
  city: "Damascus, Syria",
  latitude: 33.5138073,
  longitude: 36.2765279
}, {
  city: "Amman, Jordan",
  latitude: 31.9565783,
  longitude: 35.9456951
}];

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel">
  <button onclick="toggleMarkers()">Toggle Markers</button>
</div>
<div id="map"></div>

【讨论】：