如何删除特定组的标记？ Google 地图 API
How to remove specific group of markers? Google Maps API
我想做几个组，当我切换特定的时候我想把它隐藏起来。我会告诉你我到目前为止做了什么。但这隐藏了一切，我知道为什么，因为这个 marker.setVisible(true); “标记”是全局的，它不是针对特定组的，但我不知道如何为特定组制作它。
编辑： 可能不起作用，我知道如何包含 js 文件...
Javascript
// SanMap.js
// Tool for drawing Google Maps of San Andreas.
// Written by Tim Potze
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
//
// For more information, please refer to <http://unlicense.org>
//
/* Create a set of helper classes.
*/
/**
* Projection specialized for San Andreas, based on GallPetersProjection
* available at:
* https://developers.google.com/maps/documentation/javascript/examples/map-projection-simple
* @class SanMapProjection
* @constructor
* *implements {google.maps.Projection}
*/
function SanMapProjection(tileSize) {
/**
* The range across the map.
*
* @property projectionRange_
* @type {Number}
*/
var projectionRange_ = tileSize;
/**
* The origin of the map.
*
* @property pixelOrigin_
* @type {Object}
*/
this.pixelOrigin_ = new google.maps.Point(projectionRange_ / 2,
projectionRange_ / 2);
/**
* The number of pixels per longitude degree.
*
* @property pixelsPerLonDegree_
* @type {Number}
*/
this.pixelsPerLonDegree_ = projectionRange_ / 360;
/**
* Converts a google.maps.LatLng to google.maps.Point.
*
* @method fromLatLngToPoint
* @param {Object} latLng The LatLng object to convert.
* @param {Object} opt_point optional point type to use as return type
* instead of google.maps.Point.
* @return {Object} The newly created point.
*/
this.fromLatLngToPoint = function (latLng, opt_point) {
var point = opt_point || new google.maps.Point(0, 0);
point.x = this.pixelOrigin_.x + latLng.lng() *
this.pixelsPerLonDegree_ * 2;
point.y = this.pixelOrigin_.y - latLng.lat() *
this.pixelsPerLonDegree_ * 2;
return point;
}
/**
* Converts a google.maps.Point to google.maps.LatLng.
*
* @method fromLatLngToPoint
* @param {Object} point The Point object to convert.
* @return {Object} The newly created LatLng.
*/
this.fromPointToLatLng = function (point) {
var lng = (point.x - this.pixelOrigin_.x) /
this.pixelsPerLonDegree_ / 2;
var lat = (-point.y + this.pixelOrigin_.y) /
this.pixelsPerLonDegree_ / 2;
return new google.maps.LatLng(lat, lng, true);
}
};
/**
* Simple class for providing a google.maps.ImageMapType based on the provided
* zoom limitations and function for providing tiles.
* @class SanMapType
* @constructor
*/
function SanMapType(minZoom, maxZoom, getTileUrl, tileSize) {
/**
* Creates an instance of google.maps.ImageMapType based on the provided
* zoom limitations and function for providing tiles.
*
* @method getImageMapType
* @param {Boolean} repeating Whether the map should repeat horizontally.
* @return {Object} The newly created ImageMapType.
*/
this.getImageMapType = function (repeating) {
/* Default tileSize to 512.
*/
tileSize = tileSize || 512;
return new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var x = coord.x,
y = coord.y,
max = 1 << zoom;
/* If not repeating and x is outside of the range -or- y is
* outside of the range, return a clear tile. This can be
* provided by getTileUrl, using the tile coordinates (-1, -1).
*/
if (y < 0 || y >= max ||
(repeating !== true && (x < 0 || x >= max))) {
return getTileUrl(zoom, -1, -1);
}
/*
* Return the provided tile. Make sure x is within the
* range 0 - max.
*/
return getTileUrl(zoom, (((x % max) + max) % max), y);
},
tileSize: new google.maps.Size(tileSize, tileSize),
maxZoom: maxZoom,
minZoom: minZoom
});
}
};
/* Define a number of SanMap methods.
*/
function SanMap(){ }
/**
* Creates an instance of google.maps.Map with the provided map types.
*
* @method createMap
* @param {Object} canvas The element to draw the map on.
* @param {Number} mapTypes The map types available in the map control.
* @param {Number} zoom The initial zoom level.
* @param {Object} center The intial center point to focus on.
* @param {Boolean} repeating Whether the map should repeat horizontally.
* @param {String} defaultMap The default map type.
* @return {Object} The newly created Map.
*/
SanMap.createMap = function(canvas, mapTypes, zoom, center, repeating,
defaultMap) {
/* If no mapTypes are parsed, return null and display a warning
*/
if (mapTypes === undefined || mapTypes.length == 0) {
console.warn("SanMap: No map types were parsed with SanMap.createMap.");
return null;
}
/* Create the map
*/
var map = new google.maps.Map(canvas, {
zoom: zoom || 2,
center: center || SanMap.getLatLngFromPos(90, -90),
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
streetViewControl: false,
//mapTypeControl: false,
options: {
gestureHandling: 'greedy'
},
mapTypeControlOptions: {
mapTypeIds: Object.keys(mapTypes)
},
//restriction: {latLngBounds:{north: 90, south: -90, west: -90, east: 90}, strictBounds: false,}
});
/* Add every map type to the map.
*/
for (var key in mapTypes) {
if (mapTypes.hasOwnProperty(key)) {
var type = mapTypes[key].getImageMapType(repeating || false);
type.name = type.alt = key;
type.projection = new SanMapProjection(type.tileSize.width);
map.mapTypes.set(key, type);
}
}
/* Set the default map type.
*/
map.setMapTypeId(defaultMap || Object.keys(mapTypes)[0]);
/* If not repeating, bound the viewable area.
*/
if (!repeating) {
bounds = new google.maps.LatLngBounds(new google.maps.LatLng(-90,-90),
new google.maps.LatLng(90,90));
/* When the center changes, check if the new center is within the bounds
* of the map. If not, move the center to within these bounds.
*/
google.maps.event.addListener(map, 'center_changed', function () {
if (bounds.contains(map.getCenter()))
return;
var lng = map.getCenter().lng(),
lat = map.getCenter().lat();
if (lng < bounds.getSouthWest().lng())
lng = bounds.getSouthWest().lng();
if (lng > bounds.getNorthEast().lng())
lng = bounds.getNorthEast().lng();
if (lat < bounds.getSouthWest().lat())
lat = bounds.getSouthWest().lat();
if (lat > bounds.getNorthEast().lat())
lat = bounds.getNorthEast().lat();
map.setCenter(new google.maps.LatLng(lat, lng));
});
}
return map;
};
/* Conversion properties. */
SanMap.width = 6000;
SanMap.height = 6000;
SanMap.ox = 0;
SanMap.oy = 0;
/**
* Set the properties of the map coordinate system.
*
* @method setMapSize
* @param {Number} width The width of the map.
* @param {Number} y The GTA:SA y-coordinate.
*/
SanMap.setMapSize = function (width, height, offsetx, offsety) {
SanMap.width = width;
SanMap.height = height;
SanMap.ox = offsetx;
SanMap.oy = offsety;
}
/**
* Converts a GTA:SA coordinates to an instance of google.maps.LatLng.
*
* @method getLatLngFromPos
* @param {Number} x The GTA:SA x-coordinate.
* @param {Number} y The GTA:SA y-coordinate.
* @return {Object} The newly created LatLng.
*/
SanMap.getLatLngFromPos = function (x, y) {
return typeof(x) == "object"
? new google.maps.LatLng((x.y - SanMap.oy) / SanMap.height * 180, (x.x - SanMap.ox) / SanMap.width * 180)
: new google.maps.LatLng((y - SanMap.oy) / SanMap.height * 180, (x - SanMap.ox) / SanMap.width * 180);
}
/**
* Converts an instance of google.maps.LatLng to a GTA:SA coordinates.
*
* @method getPosFromLatLng
* @param {Object} latLng The LatLng to convert..
* @return {Object} An Object containing the GTA:SA coordinates.
*/
SanMap.getPosFromLatLng = function (latLng) {
return {x: latLng.lng() * SanMap.width / 180 + SanMap.ox, y: latLng.lat() * SanMap.height / 180 + SanMap.oy};
}
html, body, #map-canvas {
height: 100%;
padding: 0;
margin: 0;
}
<html>
<head>
<title>Old School - Mapa</title>
<!-- Disallow users to scale this page -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="removeMarker" type="checkbox" checked="checked"></input> <!-- Toggle marker group 1 -->
<input id="removeMarker2" type="checkbox" checked="checked"></input> <!-- Toggle marker group 2 -->
<!-- The container the map is rendered in -->
<div id="map-canvas"></div>
<!-- Load all javascript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyCYY5F79nsEpq6Q2Ss-BGCAgY74k4yEOHw"></script>
<script src="SanMap.js"></script>
<script>
var mapType = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/map." + zoom + "." + x + "." + y + ".png";
});
var satType = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/sat." + zoom + "." + x + "." + y + ".png";
});
var map = SanMap.createMap(document.getElementById('map-canvas'),
{'Original': mapType, 'Satelit': satType}, 1, null, false, 'Original');
var locations = [ // Marker group 1
["Burg", 1215.7954,-923.9620, 'images/icon96.png']
];
var locations2 = [ // Marker group 2
["Casino", 2043.4570,1918.1044, 'images/icon89.png']
];
for (var i = 0; i < locations.length; i++) { // Marker group 1
placeMarker(locations[i]);
}
for (var i = 0; i < locations2.length; i++) { // Marker group 2
placeMarker(locations2[i]);
}
function placeMarker(loc) { // Get markers from all groups
var latLng = SanMap.getLatLngFromPos(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
optimized: true,
icon: loc[3]
});
$('#removeMarker').click(function(event) { // Remove group 1 marker
if(this.checked)
{
$(':checkbox').each(function()
{
this.checked = true;
});
for (var i = 0; i < locations.length; i++) { marker.setVisible(true); }
}
else
{
$(':checkbox').each(function()
{
this.checked = false;
});
for(var i = 0; i < locations.length; i++) { marker.setVisible(false); }
}
});
$('#removeMarker2').click(function(event) { // Remove group 2 marker
if(this.checked)
{
$(':checkbox').each(function()
{
this.checked = true;
});
for (var i = 0; i < locations2.length; i++) { marker.setVisible(true); } // Here must be done something to be able to remove specific marker for that group
}
else
{
$(':checkbox').each(function()
{
this.checked = false;
});
for(var i = 0; i < locations2.length; i++) { marker.setVisible(false); } // Here must be done something to be able to remove specific marker for that group
}
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
map.addListener('click', function() { if(infowindow) infowindow.close(); });
}
</script>
</body>
问题在于，当您在 locations 数组中循环时，每次都在同一个标记上调用 setVisible() 方法。要实现您想要的效果，您需要在创建标记对象时存储它们，然后在需要时访问它以删除它们。
1 - 在数组中存储标记对象
首先，创建与您要创建的每个组相对应的数组。之后，当你创建标记时，将它们存储在他的类别对应的数组中。
// Array for saving markers
let loc1Markers = []; // markers object from group 1
let loc2Markers = []; // markers object from group 2
// loop for creation of markers in each group
for (let i=0; i<locations.length; i++){
loc1Markers.push(placeMarker(locations[i])); // Marker pushed in group 1
}
for (var i = 0; i < locations2.length; i++) {
loc2Markers.push(placeMarker(locations2[i])); // Marker pushed in group 2
}
function placeMarker(loc){
// ... here the content of your function
return marker // return the marker object that you just created
}
本例中，placeMarker函数最后返回创建的对象标记，直接存储在他对应的数组中。
遍历标记数组
然后，您可以通过在标记对象数组中循环访问每个所需的组。修改所有行，如
for (var i = 0; i < locations.length; i++) { marker.setVisible(true); }
通过直接调用你想要的组的数组。例如这样的事情：
for(let i=0; i<loc1Markers.length; i++){
loc1Markers[i].setVisible(true);
}
在这种情况下，您在数组中循环包含您想要的组的所有标记，并且当您调用 setVisible() 方法时，它每次都在不同的标记上。
我想做几个组，当我切换特定的时候我想把它隐藏起来。我会告诉你我到目前为止做了什么。但这隐藏了一切，我知道为什么，因为这个 marker.setVisible(true); “标记”是全局的，它不是针对特定组的，但我不知道如何为特定组制作它。
编辑： 可能不起作用，我知道如何包含 js 文件...
Javascript
// SanMap.js
// Tool for drawing Google Maps of San Andreas.
// Written by Tim Potze
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
//
// For more information, please refer to <http://unlicense.org>
//
/* Create a set of helper classes.
*/
/**
* Projection specialized for San Andreas, based on GallPetersProjection
* available at:
* https://developers.google.com/maps/documentation/javascript/examples/map-projection-simple
* @class SanMapProjection
* @constructor
* *implements {google.maps.Projection}
*/
function SanMapProjection(tileSize) {
/**
* The range across the map.
*
* @property projectionRange_
* @type {Number}
*/
var projectionRange_ = tileSize;
/**
* The origin of the map.
*
* @property pixelOrigin_
* @type {Object}
*/
this.pixelOrigin_ = new google.maps.Point(projectionRange_ / 2,
projectionRange_ / 2);
/**
* The number of pixels per longitude degree.
*
* @property pixelsPerLonDegree_
* @type {Number}
*/
this.pixelsPerLonDegree_ = projectionRange_ / 360;
/**
* Converts a google.maps.LatLng to google.maps.Point.
*
* @method fromLatLngToPoint
* @param {Object} latLng The LatLng object to convert.
* @param {Object} opt_point optional point type to use as return type
* instead of google.maps.Point.
* @return {Object} The newly created point.
*/
this.fromLatLngToPoint = function (latLng, opt_point) {
var point = opt_point || new google.maps.Point(0, 0);
point.x = this.pixelOrigin_.x + latLng.lng() *
this.pixelsPerLonDegree_ * 2;
point.y = this.pixelOrigin_.y - latLng.lat() *
this.pixelsPerLonDegree_ * 2;
return point;
}
/**
* Converts a google.maps.Point to google.maps.LatLng.
*
* @method fromLatLngToPoint
* @param {Object} point The Point object to convert.
* @return {Object} The newly created LatLng.
*/
this.fromPointToLatLng = function (point) {
var lng = (point.x - this.pixelOrigin_.x) /
this.pixelsPerLonDegree_ / 2;
var lat = (-point.y + this.pixelOrigin_.y) /
this.pixelsPerLonDegree_ / 2;
return new google.maps.LatLng(lat, lng, true);
}
};
/**
* Simple class for providing a google.maps.ImageMapType based on the provided
* zoom limitations and function for providing tiles.
* @class SanMapType
* @constructor
*/
function SanMapType(minZoom, maxZoom, getTileUrl, tileSize) {
/**
* Creates an instance of google.maps.ImageMapType based on the provided
* zoom limitations and function for providing tiles.
*
* @method getImageMapType
* @param {Boolean} repeating Whether the map should repeat horizontally.
* @return {Object} The newly created ImageMapType.
*/
this.getImageMapType = function (repeating) {
/* Default tileSize to 512.
*/
tileSize = tileSize || 512;
return new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var x = coord.x,
y = coord.y,
max = 1 << zoom;
/* If not repeating and x is outside of the range -or- y is
* outside of the range, return a clear tile. This can be
* provided by getTileUrl, using the tile coordinates (-1, -1).
*/
if (y < 0 || y >= max ||
(repeating !== true && (x < 0 || x >= max))) {
return getTileUrl(zoom, -1, -1);
}
/*
* Return the provided tile. Make sure x is within the
* range 0 - max.
*/
return getTileUrl(zoom, (((x % max) + max) % max), y);
},
tileSize: new google.maps.Size(tileSize, tileSize),
maxZoom: maxZoom,
minZoom: minZoom
});
}
};
/* Define a number of SanMap methods.
*/
function SanMap(){ }
/**
* Creates an instance of google.maps.Map with the provided map types.
*
* @method createMap
* @param {Object} canvas The element to draw the map on.
* @param {Number} mapTypes The map types available in the map control.
* @param {Number} zoom The initial zoom level.
* @param {Object} center The intial center point to focus on.
* @param {Boolean} repeating Whether the map should repeat horizontally.
* @param {String} defaultMap The default map type.
* @return {Object} The newly created Map.
*/
SanMap.createMap = function(canvas, mapTypes, zoom, center, repeating,
defaultMap) {
/* If no mapTypes are parsed, return null and display a warning
*/
if (mapTypes === undefined || mapTypes.length == 0) {
console.warn("SanMap: No map types were parsed with SanMap.createMap.");
return null;
}
/* Create the map
*/
var map = new google.maps.Map(canvas, {
zoom: zoom || 2,
center: center || SanMap.getLatLngFromPos(90, -90),
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
streetViewControl: false,
//mapTypeControl: false,
options: {
gestureHandling: 'greedy'
},
mapTypeControlOptions: {
mapTypeIds: Object.keys(mapTypes)
},
//restriction: {latLngBounds:{north: 90, south: -90, west: -90, east: 90}, strictBounds: false,}
});
/* Add every map type to the map.
*/
for (var key in mapTypes) {
if (mapTypes.hasOwnProperty(key)) {
var type = mapTypes[key].getImageMapType(repeating || false);
type.name = type.alt = key;
type.projection = new SanMapProjection(type.tileSize.width);
map.mapTypes.set(key, type);
}
}
/* Set the default map type.
*/
map.setMapTypeId(defaultMap || Object.keys(mapTypes)[0]);
/* If not repeating, bound the viewable area.
*/
if (!repeating) {
bounds = new google.maps.LatLngBounds(new google.maps.LatLng(-90,-90),
new google.maps.LatLng(90,90));
/* When the center changes, check if the new center is within the bounds
* of the map. If not, move the center to within these bounds.
*/
google.maps.event.addListener(map, 'center_changed', function () {
if (bounds.contains(map.getCenter()))
return;
var lng = map.getCenter().lng(),
lat = map.getCenter().lat();
if (lng < bounds.getSouthWest().lng())
lng = bounds.getSouthWest().lng();
if (lng > bounds.getNorthEast().lng())
lng = bounds.getNorthEast().lng();
if (lat < bounds.getSouthWest().lat())
lat = bounds.getSouthWest().lat();
if (lat > bounds.getNorthEast().lat())
lat = bounds.getNorthEast().lat();
map.setCenter(new google.maps.LatLng(lat, lng));
});
}
return map;
};
/* Conversion properties. */
SanMap.width = 6000;
SanMap.height = 6000;
SanMap.ox = 0;
SanMap.oy = 0;
/**
* Set the properties of the map coordinate system.
*
* @method setMapSize
* @param {Number} width The width of the map.
* @param {Number} y The GTA:SA y-coordinate.
*/
SanMap.setMapSize = function (width, height, offsetx, offsety) {
SanMap.width = width;
SanMap.height = height;
SanMap.ox = offsetx;
SanMap.oy = offsety;
}
/**
* Converts a GTA:SA coordinates to an instance of google.maps.LatLng.
*
* @method getLatLngFromPos
* @param {Number} x The GTA:SA x-coordinate.
* @param {Number} y The GTA:SA y-coordinate.
* @return {Object} The newly created LatLng.
*/
SanMap.getLatLngFromPos = function (x, y) {
return typeof(x) == "object"
? new google.maps.LatLng((x.y - SanMap.oy) / SanMap.height * 180, (x.x - SanMap.ox) / SanMap.width * 180)
: new google.maps.LatLng((y - SanMap.oy) / SanMap.height * 180, (x - SanMap.ox) / SanMap.width * 180);
}
/**
* Converts an instance of google.maps.LatLng to a GTA:SA coordinates.
*
* @method getPosFromLatLng
* @param {Object} latLng The LatLng to convert..
* @return {Object} An Object containing the GTA:SA coordinates.
*/
SanMap.getPosFromLatLng = function (latLng) {
return {x: latLng.lng() * SanMap.width / 180 + SanMap.ox, y: latLng.lat() * SanMap.height / 180 + SanMap.oy};
}
html, body, #map-canvas {
height: 100%;
padding: 0;
margin: 0;
}
<html>
<head>
<title>Old School - Mapa</title>
<!-- Disallow users to scale this page -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="removeMarker" type="checkbox" checked="checked"></input> <!-- Toggle marker group 1 -->
<input id="removeMarker2" type="checkbox" checked="checked"></input> <!-- Toggle marker group 2 -->
<!-- The container the map is rendered in -->
<div id="map-canvas"></div>
<!-- Load all javascript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyCYY5F79nsEpq6Q2Ss-BGCAgY74k4yEOHw"></script>
<script src="SanMap.js"></script>
<script>
var mapType = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/map." + zoom + "." + x + "." + y + ".png";
});
var satType = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/sat." + zoom + "." + x + "." + y + ".png";
});
var map = SanMap.createMap(document.getElementById('map-canvas'),
{'Original': mapType, 'Satelit': satType}, 1, null, false, 'Original');
var locations = [ // Marker group 1
["Burg", 1215.7954,-923.9620, 'images/icon96.png']
];
var locations2 = [ // Marker group 2
["Casino", 2043.4570,1918.1044, 'images/icon89.png']
];
for (var i = 0; i < locations.length; i++) { // Marker group 1
placeMarker(locations[i]);
}
for (var i = 0; i < locations2.length; i++) { // Marker group 2
placeMarker(locations2[i]);
}
function placeMarker(loc) { // Get markers from all groups
var latLng = SanMap.getLatLngFromPos(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
optimized: true,
icon: loc[3]
});
$('#removeMarker').click(function(event) { // Remove group 1 marker
if(this.checked)
{
$(':checkbox').each(function()
{
this.checked = true;
});
for (var i = 0; i < locations.length; i++) { marker.setVisible(true); }
}
else
{
$(':checkbox').each(function()
{
this.checked = false;
});
for(var i = 0; i < locations.length; i++) { marker.setVisible(false); }
}
});
$('#removeMarker2').click(function(event) { // Remove group 2 marker
if(this.checked)
{
$(':checkbox').each(function()
{
this.checked = true;
});
for (var i = 0; i < locations2.length; i++) { marker.setVisible(true); } // Here must be done something to be able to remove specific marker for that group
}
else
{
$(':checkbox').each(function()
{
this.checked = false;
});
for(var i = 0; i < locations2.length; i++) { marker.setVisible(false); } // Here must be done something to be able to remove specific marker for that group
}
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
});
map.addListener('click', function() { if(infowindow) infowindow.close(); });
}
</script>
</body>
问题在于，当您在 locations 数组中循环时，每次都在同一个标记上调用 setVisible() 方法。要实现您想要的效果，您需要在创建标记对象时存储它们，然后在需要时访问它以删除它们。
1 - 在数组中存储标记对象
首先，创建与您要创建的每个组相对应的数组。之后，当你创建标记时，将它们存储在他的类别对应的数组中。
// Array for saving markers
let loc1Markers = []; // markers object from group 1
let loc2Markers = []; // markers object from group 2
// loop for creation of markers in each group
for (let i=0; i<locations.length; i++){
loc1Markers.push(placeMarker(locations[i])); // Marker pushed in group 1
}
for (var i = 0; i < locations2.length; i++) {
loc2Markers.push(placeMarker(locations2[i])); // Marker pushed in group 2
}
function placeMarker(loc){
// ... here the content of your function
return marker // return the marker object that you just created
}
本例中，placeMarker函数最后返回创建的对象标记，直接存储在他对应的数组中。
遍历标记数组
然后，您可以通过在标记对象数组中循环访问每个所需的组。修改所有行，如
for (var i = 0; i < locations.length; i++) { marker.setVisible(true); }
通过直接调用你想要的组的数组。例如这样的事情：
for(let i=0; i<loc1Markers.length; i++){
loc1Markers[i].setVisible(true);
}
在这种情况下，您在数组中循环包含您想要的组的所有标记，并且当您调用 setVisible() 方法时，它每次都在不同的标记上。