我继承了一些代码并且卡住了。在加载时，它显示所有年份我只希望它显示具有2018年的标记。有一个jQuery滑块选择年份但在地图加载时它会加载所有年份的引脚。以为我会在网上搜索解决/学习这个问题。这只是代码的一部分，但我相信它是决定加载时显示内容的部分。
function resizeMarker_Div() {
jQuery('.map-content-div').each(function() {
var height = jQuery(this).height();
var imgCover = jQuery(this).prev();
imgCover.height(height);
});
}
resizeMarker_Div();
var infoWindow;
function initMap() {
var center = new google.maps.LatLng(34.4857537,-111.3747484);
var mapOptions = {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById('map'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
function addMarker(marker) {
var mylatLng = new google.maps.LatLng(marker[0], marker[1]);
var category = marker[4];
var title = marker[2];
var content = marker[5];
var year = marker[3];
marker1 = new google.maps.Marker({
position: mylatLng,
title: title,
category: category,
map: map,
animation: google.maps.Animation.DROP,
year: year
});
gmarkers1.push(marker1);
答案 0 :(得分：1)
如果markers数据中包含年份，则可以尝试：
for( i = 0; i < markers1.length; i++ ) {
var mkr=markers1[i];
if( parseInt( mkr[3] )==2018 )addMarker( mkr );
}
进一步观察这一点，我意识到上述情况并不适合这种情况，因为它只会加载2018年的标记，因此最好将所有标记的可见性设置为无（在addmarker中函数）无论它们是否来自当前年份，然后明确地更改当前年份的任何标记的该属性。 jQuery滑块代码定位标记的visibility属性，这就是为什么必须首先将所有标记添加到地图中。
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Google maps - display markers for year on load</title>
<script>
/*
configure these options to suit
-------------------------------
@var: clickable
@type: Boolean
@description: display infowindow or not when marker is clicked
@var: draggable
@type: Boolean
@description: allow markers to be dragged
@var: limityear
@type: Boolean
@description: Limits initial display of markers to the current year.
All markers are added regardless but visibility of
markers is affected. Set as `true` to display current
year or `false` to display all.
@var: hide
@type: Boolean
@description: This controls whether or not markers are initially hidden
or not. Set to `true` to hide markers not from this year
or `false` to display all.
*/
var clickable=true;
var draggable=false;
var limityear=true;
var hide=true;
var markers = [];
var infoWindow,map,latlng,options,marker,bounds;
function initMap(){
infoWindow = new google.maps.InfoWindow();
bounds = new google.maps.LatLngBounds();
latlng=new google.maps.LatLng( 34.4857537, -111.3747484 );
options = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map( document.getElementById('map'), options );
bounds.extend( latlng );
var addmarker=function( mkr ){
latlng=new google.maps.LatLng( mkr[0], mkr[1] );
var title=mkr[2];
var category=mkr[4];
var year=mkr[3];
var content=mkr[5];
/*
Add marker for each location found in source
data array. Set the visibility to none initially
for each marker.
*/
marker=new google.maps.Marker({
position: latlng,
title: [ title, category, year ].join( String.fromCharCode(10) ),
category: category,
content:content,
map: map,
animation: google.maps.Animation.DROP,
year: year,
draggable:draggable,
visible:!hide /* Hide all markers - dependant upon variable `hide` - can be changed via querystring */
});
markers.push( marker );
bounds.extend( latlng );
/*
If the year for construction is the current year, set the visibility
of the marker to true. The jQuery slider affects this parameter of the
marker.
*/
if( limityear && parseInt( year )==( new Date().getFullYear() ) ) marker.setVisible( true );
if( clickable ){/* change the `clickable` variable to display infowindow */
google.maps.event.addListener( marker, 'click', function( event ){
infoWindow.setContent( this.content );
infoWindow.open( map, this );
}.bind( marker ) );
}
}
/* add markers ~ iterate through source data*/
markers1.forEach( function( mkr ){
addmarker.call( this, mkr );
});
map.fitBounds( bounds );
}
</script>
<script>
var markers1 = [
[34.549971,
-112.446127,
"fda",
"2018",
"Utility Infrastructure",
"<div style='width:320px; display:inline-block; padding:-15px;'><div class='map-image-div' style = 'width:155px;min-height:100px; float:right;'><img src='http://mountainviewmedia.com/fann-contracting/wp-content/uploads/2018/01/2118-pic1-150x150.jpg'style='width: 100%;height: 100%;'></div><div class='map-content-div' style = 'width:165px;min-height:100px; float:left; word-wrap:break-word;'><table border='1' style='min-height:150px;'><tr><td style='padding:2px 4px;' colspan='2' align='center'><strong>Prescott Resort Casino Site Improvements</strong></td></tr><tr style=' vertical-align:top;'><td style='padding:2px 4px;'><strong>Location:</strong></td><td style='padding:2px 4px;'>fda</td></tr><tr style=' vertical-align:top;'><td style='padding:2px 4px;'><strong>Budget:</strong></td><td style='padding:2px 4px;'>fda</td></tr><tr style=' vertical-align:top;'><td style='padding:2px 4px;'><strong>For Whom:</strong></td><td style='padding:2px 4px;'>Yavapai Tribe</td></tr><tr><td style='padding:2px 4px;' colspan='2' align='center'><a href='http://mountainviewmedia.com/fann-contracting/ds_projects/test-post-2018/'>More Information >> </a></td></tr></table></div>",
],
[33.3061605,
-111.8412502,
"Chandler, AZ",
"2010",
"Material Supply",
"<div style='width:320px; display:inline-block; padding:-15px;'><div class='map-image-div' style = 'width:155px;min-height:100px; float:right;'><img src='http://mountainviewmedia.com/fann-contracting/wp-content/uploads/2017/11/1000ISS-pic1-150x150.jpg'style='width: 100%;height: 100%;'></div><div class='map-content-div' style = 'width:165px;min-height:100px; float:left; word-wrap:break-word;'><table border='1' style='min-height:150px;'><tr><td style='padding:2px 4px;' colspan='2' align='center'><strong>Hot Coated Chips Production</strong></td></tr><tr style=' vertical-align:top;'><td style='padding:2px 4px;'><strong>Location:</strong></td><td style='padding:2px 4px;'>Chandler, AZ</td></tr><tr style=' vertical-align:top;'><td style='padding:2px 4px;'><strong>Budget:</strong></td><td style='padding:2px 4px;'>$5,58,000</td></tr><tr style=' vertical-align:top;'><td style='padding:2px 4px;'><strong>For Whom:</strong></td><td style='padding:2px 4px;'>International Surfacing Systems</td></tr><tr><td style='padding:2px 4px;' colspan='2' align='center'><a href='http://mountainviewmedia.com/fann-contracting/ds_projects/hot-coated-chips-production/'>More Information >> </a></td></tr></table></div>",
]
/* remaining data truncated for demo */
];
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBq6g18AQTdyQAH8woFYApo9VMdJzE04tA&callback=initMap'></script>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
答案 1 :(得分：1)
如果您不希望标记在页面加载时显示，请在创建它们时将Q属性设置为visible（在false函数中）。
addMarker代码段
function addMarker(marker) {
var mylatLng = new google.maps.LatLng(marker[0], marker[1]);
var category = marker[4];
var title = marker[2];
var content = marker[5];
var year = marker[3];
marker1 = new google.maps.Marker({
position: mylatLng,
title: title,
category: category,
map: map,
animation: google.maps.Animation.DROP,
year: year,
visible: false // <------------------------ add this
});
gmarkers1.push(marker1);
}
jQuery(document).ready(function() {
var handle = jQuery("#custom-handle");
var year = (new Date()).getFullYear();
var nmarkers = new Array();
jQuery('#slider-filter').slider({
range: false,
min: 1999,
max: 2018,
step: 1,
value: year,
//
//
create: function() {
handle.text(jQuery(this).slider("value"));
},
slide: function(event, ui) {
jQuery("#year-selected").val(ui.value);
handle.text(ui.value);
jQuery('').each(function() {
//
jQuery(this).prop("checked", true);
});
},
change: function(event, ui) {
handle.text(ui.value);
jQuery("#year-selected").val(ui.value);
var year = ui.value;
var plus = 0;
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
//changed from <= to == to only show year slider is on now
if (marker.year == year) {
marker.setVisible(true);
marker.setMap(map);
infoWindow.close();
} else {
plus++;
marker.setVisible(false);
infoWindow.close();
}
}
if (plus === markers1.length) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// set to false to hide blank years
marker.setVisible(false);
}
}
}
});
jQuery("#year-selected").val(jQuery("#slider-filter").slider("value"));
// jQuery("#year-selected").val(jQuery("1999"));
jQuery("#prev").click(function() {
var s = jQuery("#slider-filter"),
val = s.slider("value"),
step = s.slider("option", "step");
s.slider("value", val - step);
jQuery('.categories').each(function() {
jQuery(this).prop("checked", true);
});
});
jQuery("#next").click(function() {
var s = jQuery("#slider-filter"),
val = s.slider("value"),
step = s.slider("option", "step");
s.slider("value", val + step);
jQuery('.categories').each(function() {
jQuery(this).prop("checked", true);
});
});
jQuery('.filter-slider').click(function() {
jQuery('.filter-slider .btn').css('opacity', '1');
jQuery('.filter-slider #slider-filter').css('opacity', '1');
});
jQuery('.filter-slider #slider-filter').click(function() {
jQuery('.filter-slider .btn').css('opacity', '1');
jQuery('.filter-slider #slider-filter').css('opacity', '1');
});
jQuery('.filter-slider #slider-filter #custom-handle').click(function() {
jQuery('.filter-slider .btn').css('opacity', '1');
jQuery('.filter-slider #slider-filter').css('opacity', '1');
});
jQuery('.filter-slider .btn').click(function() {
jQuery('.filter-slider .btn').css('opacity', '1');
jQuery('.filter-slider #slider-filter').css('opacity', '1');
});
//joes
//jQuery(' #slider-filter #custom-handle').click(function(){
// jQuery(' #slider-filter #custom-handle').css('opacity','0');
// jQuery(' #slider-filter #custom-handle').css('opacity','1');
// });
});
var gmarkers1 = [];
var markers1 = [];
var markers1 = [
[34.549971, -112.446127,
"fda",
"2018",
"Utility Infrastructure",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[33.3061605, -111.8412502,
"Chandler, AZ",
"2010",
"Material Supply",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.638156, -112.41339,
"Prescott, AZ",
"2017",
"Materials Hauling",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.62297, -112.397734,
"Prescott, AZ",
"2013",
"Utility Infrastructure",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.538685, -112.477651,
"Prescott, AZ",
"2015",
"Utility Infrastructure",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.527217, -112.462149,
"Prescott, AZ",
"2012",
"Utility Infrastructure",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.560211, -112.385359,
"Yavapai Hills, AZ",
"2006",
"Private Development",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[33.386942, -112.863026,
"Palo Verde, AZ",
"2012",
"Private Development",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.552547, -112.406389,
"Prescott, AZ",
"2017",
"Private Development",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.627891, -112.40366,
"Prescott, AZ",
"2016",
"Private Development",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.632133, -111.831678,
"I-17 near McGuireville, AZ",
"2016",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.531492, -112.446035,
"Prescott, AZ",
"2016",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.785024, -112.424645,
"Chino Valley, AZ",
"2008",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.573106, -112.480707,
"Prescott, AZ",
"2012",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[33.521041, -113.067333,
"I-10 Burnt Well Rest Area",
"2015",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.1862813, -112.1345168,
"I-17 Sunset Point Rest Area",
"2013",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[32.730905, -113.716097,
"I-10 near Dateland, AZ",
"2017",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.20517, -112.760672,
"South of Yarnell, AZ",
"2016",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[36.061658, -112.109187,
"Grand Canyon South Rim, AZ",
"1999",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.514648, -112.04803,
"Hwy 169, AZ",
"2011",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.543276, -112.459697,
"Prescott, AZ",
"2005",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.496562, -112.446034,
"Prescott, AZ",
"2014",
"Specialty Projects",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.959335, -112.133375,
"Grand Canyon Airport, Tusayan, AZ",
"2016",
"Airport",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.992137, -113.81564,
"Grand Canyon West, AZ",
"2011",
"Airport",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.957506, -112.141376,
"Grand Canyon Airport, Tusayan, AZ",
"2016",
"Airport",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.123791, -109.318721,
"Springerville, AZ",
"2013",
"Airport",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.136588, -111.672924,
"Flagstaff Pulliam Airport",
"2017",
"Airport",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.904668, -113.94333,
"Grand Canyon West, AZ",
"2014",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.160572, -111.282308,
"I-40 near Twin Arrows Casino, AZ",
"2017",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.162275, -113.676033,
"I-40 near Seligman, AZ",
"2016",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.170003, -113.524763,
"I-40 near Seligman, AZ",
"2017",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[35.229376, -112.234586,
"I-40 near Williams, AZ",
"2017",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.742607, -111.686426,
"I-17 near Village of Oak Creek, AZ",
"2013",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.474036, -112.020904,
"I-17 near Arcosanti, AZ",
"2014",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[34.175888, -112.133023,
"I-17 Black Canyon City, AZ",
"2017",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[33.999509, -112.133472,
"I-17 Black Canyon City, AZ",
"2017",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[33.6307305, -113.7676805,
"I-10 New Hope, AZ",
"2016",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
[32.813526, -113.507267,
"I-10 near Dateland, AZ",
"2013",
"Highway and Transportation",
"<div style='width:320px; display:inline-block; padding:-15px;'></div>",
],
];
function resizeMarker_Div() {
jQuery('.map-content-div').each(function() {
var height = jQuery(this).height();
var imgCover = jQuery(this).prev();
imgCover.height(height);
});
}
resizeMarker_Div();
var infoWindow;
var map;
function initMap() {
var center = new google.maps.LatLng(34.4857537, -111.3747484);
var mapOptions = {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN,
};
infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById('map'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
function addMarker(marker) {
var mylatLng = new google.maps.LatLng(marker[0], marker[1]);
var category = marker[4];
var title = marker[2];
var content = marker[5];
var year = marker[3];
marker1 = new google.maps.Marker({
position: mylatLng,
title: title,
category: category,
map: map,
animation: google.maps.Animation.DROP,
year: year,
visible: false
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
return function() {
infoWindow.setContent(content);
//Client asked for infoWindow to be unclickable so the next line was commented out
//infoWindow.open(map, marker1);
resizeMarker_Div();
}
})(marker1, content));
}
function slider_change() {
var year = (new Date()).getFullYear();
jQuery('#slider-filter').slider({
value: year
});
jQuery('.filter-slider .btn').css('opacity', '0.5');
jQuery('.filter-slider #slider-filter').css('opacity', '0.5');
var categories_name = new Array();
jQuery('.categories').each(function() {
//was false
if (jQuery(this).prop("checked") == false) {
categories_name.push(jQuery(this).val());
}
});
var plus = 0;
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (jQuery.inArray(marker.category, categories_name) != -1) {
//was true
marker.setVisible(true);
marker.setMap(map);
infoWindow.close();
}
// Categories don't match
else {
plus++;
marker.setVisible(false);
infoWindow.close();
}
}
if (plus === markers1.length) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i]; //was true
marker.setVisible(true);
marker.setMap(map);
}
}
}
//
initMap();
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
}
function toggle_visibility2(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
}html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}