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

Question

I set up a simple Google Map interface using Google Map API v3 and want to implement a function that can toggle markers, but it does not function properly. 我使用Google Map API v3设置了一个简单的Google Map界面，并希望实现一个可以切换标记的功能，但是它无法正常运行。 I cannot turn it on after turning the layer off. 关闭图层后，无法打开它。

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);
        }
    }
}

ToggleMarkers function is being called in HTML. 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>

Answer 1

Your map variable is local to your initMap function. 您的map变量在initMap函数本地。

Change this: 更改此：

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);

To: 至：

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 概念证明

code snippet: 代码段：

 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>

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

问题描述

1 个解决方案

解决方案1
0 2015-11-21 22:02:58

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

问题描述

1 个解决方案

解决方案1 0 2015-11-21 22:02:58

解决方案1
0 2015-11-21 22:02:58