我正在研究Google Map Marker项目，距离我仅一步之遥。在搜索中一切正常，谷歌地图标记工作正常。现在的问题是，当我过滤时，它应该显示在地图内的相关标记上。我有点困惑该怎么做。我是JavaScript和JSON的新手，也是我的第一个项目。
这是我的项目https://cdn.assetrepository.me/maps-test/
的链接下面我粘贴了代码
var currentCode = 0;
function selectmarker(ele) {
$(".dealer-item_details").animate({
left: '-100%'
}, 'fast');
$(".dealer-item_details .dealer-info-name, .c_phone, .c_email, .c_direction, .c_distance").empty();
// $('.result-dealers-items .dealer-info-name').click(function () {
// $this = ele;
var info_name = ele.text();
var info_distance = ele.siblings('.distance-units').html();
$(".c_distance").append(info_distance);
$(".dealer-item_details .dealer-info-name").append(info_name);
var info_phone = ele.siblings('.dealer-list-phone').html();
$(".c_phone").append(info_phone);
var info_email = ele.siblings('.search_email').html();
$(".c_email").append(info_email);
$(".timing").html(ele.siblings(".mytiming").html())
var info_direction = ele.siblings('.search_direction').html();
$(".c_direction").append(info_direction);
$(".dealer-item_details").animate({
left: '0%'
}, 'fast');
// });
}
function nextChar() {
currentCode++;
var character = String.fromCharCode(64 + currentCode);
// document.getElementById("demo").innerHTML = character;
return character
}
var image = 'https://cdn.assetrepository.me/map/icon-marker.png';
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(24.0000, 45.0000),
panControl: true,
panControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var clusterStyles = [{
url: 'https://cdn.assetrepository.me/test/images/map_tag.png', //'https://en.nissan-saudiarabia.com/etc/designs/nissan/19.08.5.NISSAN-18/common-assets/img/map/dealer-marker-alpha-default.png',
height: 80,
width: 75,
// anchor: [45, 45],
textColor: '#fff',
textSize: 20
}];
var mcOptions = {
styles: clusterStyles
};
var markerCluster = new MarkerClusterer(map, [], mcOptions);
var options = {
types: [],
componentRestrictions: {
country: "sa"
}
};
var markers = [];
var input = document.getElementById('showroom_search');
var autocomplete = new google.maps.places.Autocomplete(input, options);
var icon = {
url: 'https://cdn.assetrepository.me/test/images/user-location.png', // url
scaledSize: new google.maps.Size(40, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(10, 10), // anchor
labelOrigin: new google.maps.Point(20, 20)
};
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29),
icon: icon
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace()
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
var value = place;
console.log(geoLat)
} else {
console.log(place.geometry.location)
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var geoLong = value.geometry.location.lng();
var geoLat = value.geometry.location.lat();
var point_a = new google.maps.LatLng(geoLong, geoLat);
marker.setPosition(place.geometry.location);
marker.setVisible(true);
markerCluster.clearMarkers();
markers = [];
currentCode = 0;
$('.result-dealers-items .dealer-item').remove();
var searchField = $('#showroom_search').val();
alert(searchField);
searchField = searchField.substr(searchField.lastIndexOf(",") + 1).trim()
var expression = new RegExp(searchField, "i");
var counter = 0;
var week = ["MONDAY"
,"TUESDAY"
,"WEDNESDAY"
,"THURSDAY"
,"FRIDAY"
,"SATURDAY"
,"SUNDAY"]
$.getJSON('https://cdn.assetrepository.me/json/Petromin_en.json', function(data) {
$.each(data, function(key, value) {
var timing = ""
if (value.city.search(expression) != -1 || value.city.search(expression) != -1) {
var geoLong_a = value.longitude;
var geoLat_s = value.latitude;
var point_b = new google.maps.LatLng(geoLong_a, geoLat_s);
// console.log(google.maps.geometry.spherical.computeDistanceBetween(point_a, point_b)/ 1000)
var distancce = (google.maps.geometry.spherical.computeDistanceBetween(point_a, point_b) / 1000).toFixed(2);
var servicelist = ""
for (ser in value.services_list){
servicelist += value.services_list[ser] + " | ";
}
//if (distancce < 5.1)
{
var infowindow = new google.maps.InfoWindow();
var char = nextChar();
var latLng = new google.maps.LatLng(geoLat_s, geoLong_a);
var icon = {
url: 'https://cdn.assetrepository.me/test/images/map_tag.png', // url
scaledSize: new google.maps.Size(40, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(10, 10), // anchor
labelOrigin: new google.maps.Point(20, 20)
};
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
label: {
text: char,
color: "white",
fontSize: "20",
fontWeight: "bold"
}, // labels[labelIndex++ % labels.length],
'position': latLng,
icon: icon
});
html = "<div> test </div>";
makeInfoWindowEvent(map, infowindow, html, marker);
for (ser in value.services_list)
markers[value.services_list[ser]] = []
for (ser in value.services_list)
markers[value.services_list[ser]].push(marker)
display = "display:none"
for (ser in markers){
console.log(markers)
// if($(".showroom_btn").parent("check_row").hasClass("active_check_btn")){
if(markers["Showroom Sales"]){
markerCluster.addMarkers(markers["Showroom Sales"]);
display = "display:block"
}
//}
}
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
google.maps.event.addListener(marker, 'click', function() {
console.log(marker.label.text)
selectmarker(
$('.indicator:contains(' + marker.label.text + ')').parent(".dealer-info").find(".dealer-info-name"));
});
}
for(ss in value.OpeningHours){
timing += '<tr>'
+'<td><strong>'+week[parseInt(ss)-1]+'</strong></td>'
+'<td>'+value.OpeningHours[ss].openFrom+' - '+value.OpeningHours[ss].openUntil+'</td>'
+'</tr>';
}
$('.result-dealers-items').append(
'<li class="dealer-item"><div class="indicator">'
+ char +
'</div><div class="dealer-info"><h3 class="dealer-info-name">' +
value.name +
'<span class="statename">  ' +
value.state +
'</span></h3><p class="hide_search dealer-list-phone"><a href="tel:' + value.phones + '"> Call ' +
value.phones +
'</a></p><p class="distance-units hide_search">(' +
distancce +
" KM" +
')</p><p class="hide_search search_email hide_main"><a href="email:' + value.email + '"> Email <span class="hide_text">' +
value.showroomemail +
'</span></a></p><p class="hide_search search_direction hide_main"><a href="' + "https://www.google.com/maps/dir/" + value.latitude + "," + value.longitude + '" target="_blank">Get Directions </a><span class="hide_text">' + "aaa"+
'</span><p class="serv_list">'+
servicelist
+'</p>'+
'<table style="display:none;" class="mytiming"> '+timing+' </table></li>'
);
}
}
$(".reset_filter").click()
});
$('.result-dealers-items .dealer-info-name').click(function() {
selectmarker($(this))
});
$('.back_to').click(function() {
$(".dealer-item_details").animate({
left: '-100%'
}, 'fast');
$(".dealer-item_details .dealer-info-name, .c_phone, .c_email, .c_direction, .c_distance").empty();
});
});
});
var cbs = document.querySelectorAll('input[name="showroom_services"]');
[].forEach.call(cbs, function (cb) {
cb.addEventListener("click", function(){
const listSelected = [...document.querySelectorAll( 'input[name="showroom_services"]:checked' )].map(ele=>ele.value);
document.querySelectorAll('.dealer-item')
.forEach(ele=>{
if(listSelected.some(l=> ele.textContent.includes(l))){
ele.classList.add("list_active");ele.classList.remove("list_deactive")
}
else if(listSelected.every(l=> ele.textContent.includes(l))){
ele.classList.add("list_active");ele.classList.remove("list_deactive")
}
else {
ele.classList.add("list_deactive");ele.classList.remove("list_active")
}
});
});
});