谷歌地图api v3。函数showMarkers（）只是隐藏/清除NEW标记

我添加新的标记并将它们推入标记[]中，但我无法再在地图上显示它们。我已阅读可能论坛和线程（谷歌开发人员等），但我无法弄清楚。任何帮助和建议，将不胜感激。提前致谢。谷歌地图api v3。函数showMarkers（）只是隐藏/清除NEW标记

 var map; 
 
\t \t var markers = []; \t //markers is an array variable with global scope \t 
 
\t \t var myLatLng = {lat: 40.6069135, lng: 22.9566052}; 
 
\t \t //var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
 
\t \t //var labelIndex = 0; \t \t 
 
\t \t 
 
\t \t var locations = [ 
 
\t \t ['First Fire Station', 40.635325, 22.955178], 
 
\t \t ['Second Fire Station', 40.645071, 22.926711], 
 
\t \t ['Third Fire Station', 40.599891, 22.956932], 
 
\t \t ['Observer 1', 40.631225, 23.031213], 
 
\t \t ['Observer 2', 40.604363, 23.032420] 
 
\t \t ]; 
 
\t 
 
\t \t function initMap() { 
 
\t \t \t var infowindow = new google.maps.InfoWindow(); 
 
\t \t \t 
 
\t \t \t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t \t zoom: 12, 
 
\t \t \t \t center: myLatLng, 
 
\t \t \t \t mapTypeControl: true, 
 
\t \t \t \t mapTypeControlOptions: { 
 
\t \t \t \t \t style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
 
\t \t \t \t \t position: google.maps.ControlPosition.TOP_RIGHT, 
 
\t \t \t \t \t mapTypeIds: ['roadmap', 'terrain', 'satellite'] 
 
\t \t \t \t } 
 
\t \t \t }); 
 

 
\t \t \t function placeMarker(loc) { 
 
\t \t \t \t var latLng = new google.maps.LatLng(loc[1], loc[2]); 
 
\t \t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t \t \t position: latLng, 
 
\t \t \t \t \t map: map 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t google.maps.event.addListener(marker, 'click', function(){ 
 
\t \t \t \t \t infowindow.close(); // Close previously opened infowindow 
 
\t \t \t \t \t infowindow.setContent("<div id='infowindow'>"+ loc[0] +"</div>"); 
 
\t \t \t \t \t infowindow.open(map, marker); 
 
\t \t \t \t \t }); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t for (var i = 0; i < locations.length; i++){ 
 
\t \t \t \t placeMarker(locations[i]); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t // This event listener will call addMarker() when the map is clicked. 
 
\t \t \t google.maps.event.addListener(map, 'click', function(event) { 
 
\t \t \t \t addMarker(event.latLng, map); 
 
\t \t \t }); 
 
\t \t } 
 
\t \t 
 
\t \t // Adds a marker to the map and push to the array. 
 
\t \t function addMarker(location, map) { 
 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: location, 
 
\t \t \t //label: labels[labelIndex++ % labels.length], 
 
\t \t \t map: map 
 
\t \t }); 
 
\t \t markers.push(marker); 
 
\t \t } 
 

 
\t \t // Sets the map on all markers in the array. 
 
\t \t function setMapOnAll(map) { 
 
\t \t for (var i = 0; i < markers.length; i++) { 
 
\t \t \t markers[i].setMap(map); 
 
\t \t } 
 
\t \t } 
 

 
\t \t // Removes the markers from the map, but keeps them in the array. 
 
\t \t function clearMarkers() { 
 
\t \t setMapOnAll(null); 
 
\t \t } 
 

 
\t \t // Shows any markers currently in the array. 
 
\t \t function showMarkers() { 
 
\t \t setMapOnAll(map); 
 
\t \t } 
 

 
\t \t // Deletes all markers in the array by removing references to them. 
 
\t \t function deleteMarkers() { 
 
\t \t clearMarkers(); 
 
\t \t markers = []; 
 
\t \t }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>cl 1.2</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    <script async defer src="http://code.jquery.com/jquery-latest.min.js" 
 
     type="text/javascript"></script> 
 
\t <script src="script.js"></script> 
 
    <script async defer> 
 
    </script> 
 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGHuOFn-gCv9AUDNclsfNDhMvVkkcNU4Y&callback=initMap&libraries=geometry,places"> 
 
\t </script> 
 
    <style> 
 
     html, body {height: 100%; margin: 0; padding: 0;} 
 
     #map {height: 100%;} 
 
\t #infowindow {padding: 10;} 
 
\t #floating-panel {position: absolute; top: 50px; left: 40%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
\t <div id="map"></div> 
 
\t <div id="infowindow"></div> 
 
\t <div id="floating-panel"> 
 
      <input onclick="clearMarkers();" type=button value="Hide Markers"> 
 
      <input onclick="showMarkers();" type=button value="Show All Markers"> 
 
      <input onclick="deleteMarkers();" type=button value="Delete Markers"> 
 
    </div> 
 
    </body> 
 
</html>

来源

2016-08-22 Chris Liotiris

您需要初始化全局映射变量。

变化：

var map; 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), {

要：

var map; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), {

代码片段：

var map; 
 
var markers = []; //markers is an array variable with global scope \t 
 
var myLatLng = { 
 
    lat: 40.6069135, 
 
    lng: 22.9566052 
 
}; 
 
//var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
 
//var labelIndex = 0; \t \t 
 

 
var locations = [ 
 
    ['First Fire Station', 40.635325, 22.955178], 
 
    ['Second Fire Station', 40.645071, 22.926711], 
 
    ['Third Fire Station', 40.599891, 22.956932], 
 
    ['Observer 1', 40.631225, 23.031213], 
 
    ['Observer 2', 40.604363, 23.032420] 
 
]; 
 

 
function initMap() { 
 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: myLatLng, 
 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
 
     position: google.maps.ControlPosition.TOP_RIGHT, 
 
     mapTypeIds: ['roadmap', 'terrain', 'satellite'] 
 
    } 
 
    }); 
 

 
    function placeMarker(loc) { 
 
    var latLng = new google.maps.LatLng(loc[1], loc[2]); 
 
    var marker = new google.maps.Marker({ 
 
     position: latLng, 
 
     map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.close(); // Close previously opened infowindow 
 
     infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>"); 
 
     infowindow.open(map, marker); 
 
    }); 
 
    } 
 

 
    for (var i = 0; i < locations.length; i++) { 
 
    placeMarker(locations[i]); 
 
    } 
 

 

 
    // This event listener will call addMarker() when the map is clicked. 
 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    addMarker(event.latLng, map); 
 
    }); 
 
} 
 

 
// Adds a marker to the map and push to the array. 
 
function addMarker(location, map) { 
 
    var marker = new google.maps.Marker({ 
 
    position: location, 
 
    //label: labels[labelIndex++ % labels.length], 
 
    map: map 
 
    }); 
 
    markers.push(marker); 
 
} 
 

 
// Sets the map on all markers in the array. 
 
function setMapOnAll(map) { 
 
    for (var i = 0; i < markers.length; i++) { 
 
    markers[i].setMap(map); 
 
    } 
 
} 
 

 
// Removes the markers from the map, but keeps them in the array. 
 
function clearMarkers() { 
 
    setMapOnAll(null); 
 
} 
 

 
// Shows any markers currently in the array. 
 
function showMarkers() { 
 
    setMapOnAll(map); 
 
} 
 

 
// Deletes all markers in the array by removing references to them. 
 
function deleteMarkers() { 
 
    clearMarkers(); 
 
    markers = []; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>cl 1.2</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    <script async defer src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGHuOFn-gCv9AUDNclsfNDhMvVkkcNU4Y&callback=initMap&libraries=geometry,places"> 
 
    </script> 
 
    <style> 
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    #infowindow { 
 
     padding: 10; 
 
    } 
 
    #floating-panel { 
 
     position: absolute; 
 
     top: 50px; 
 
     left: 40%; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto', 'sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    <div id="infowindow"></div> 
 
    <div id="floating-panel"> 
 
    <input onclick="clearMarkers();" type=button value="Hide Markers"> 
 
    <input onclick="showMarkers();" type=button value="Show All Markers"> 
 
    <input onclick="deleteMarkers();" type=button value="Delete Markers"> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-08-22 18:13:54 geocodezip

Thiks o很多时间@geocodezip ...它的工作！这是一个愚蠢的错误，我没有注意到它！ –

//删除所有标记尝试这种方式

for (Marker m : markers) { 
m.remove(); 
}

，并再次加入他们，你需要遍历数组，并调用addMarker（）方法

来源

2016-08-22 18:02:07 vicky

showMarkers()使用的全局变量map从不设置。 initMap()使用它自己的本地map变量，而不是设置全局map。

因此showMarkers()有效地调用setMapOnAll(undefined)，它不显示任何标记。如果你传递正确的地图，它应该工作。

来源

2016-08-22 18:03:09 sth

谷歌地图api v3。函数showMarkers（）只是隐藏/清除NEW标记

回答

相关问题