Помогите, как сделать так, чтобы при выборе точки на карте в скроллере проматывалось до данного "продукта" в js
Помогите пожалуйста, как сделать так, чтобы при выборе точки на карте в скроллере проматывалось до данного "продукта" в js. Спасибо! Вот код который есть:
let map;
let markers = [];
let products = [];
let page = 0;
let pages = [];
let topcity = "Москва";
let topbuild = [];
let tophighway = [];
let digital = [];
let static = [];
let coords = [];
function split(array, n) {
let [...arr] = array;
var res = [];
while (arr.length) {
res.push(arr.splice(0, n));
}
return res;
}
document.addEventListener('click', () => {
const select = document.querySelectorAll("[data-multi-select-plugin]");
for (let i = 0; i < select.length; i++) {
if (event) {
var isClickInside = select[i].parentElement.parentElement.contains(event.target);
if (!isClickInside) {
const wrapper = select[i].parentElement.parentElement;
const dropdown = wrapper.querySelector(".dropdown-icon");
const autocomplete_list = wrapper.querySelector(".autocomplete-list");
if (dropdown.classList.contains("active")) {
dropdown.classList.remove("active");
autocomplete_list.innerHTML = "";
addPlaceholder(wrapper);
}
}
}
}
});
const displayButtonsprev = () => '<div id="buttons"><div id="prev"><button><i class="fas fa-arrow-up"></i></button></div></div>'
const displayButtonsnext = () => '<div id="buttons"><div id="next"><button><i class="fas fa-arrow-down"></i></button></div></div>'
const displayFiltermap = () => '<select class="browser-default" id="citySelect" name="Id">'+
`<option ${topcity === "Москва" ? "selected" : ""} value="Москва">Москва </option>`+
`<option ${topcity === "МО" ? "selected" : ""} value="МО">МО</option>`+
`<option ${topcity === "Санкт-Петербург" ? "selected" : ""} value="Санкт-Петербург">Санкт-Петербург</option></select>`+
'<div class="build"><div>' +
'<select multiple data-multi-select-plugin>'+
digital.concat(static).map((cat)=>{
return `<option value="${cat.id}" ${topbuild.includes(`${cat.id}`) ? "selected" : ""}>${cat.name}</option>`
}).join("")+
'</select>'+
'</div>'+
'</div>'
let filter = (product) => {
return true;
}
const clearMarkers = () => {
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
};
const setPage = (i) => {
if (page !== i) {
page = i;
return displayPage();
}
return null;
}
const nextPage = () => {
if (page === pages.length - 1) {
setPage(0);
} else {
setPage(page + 1);
}
}
const prevPage = () => {
if (page === 0) {
setPage(pages.length - 1);
} else {
setPage(page - 1);
}
}
const displayPage = () => {
if (products.length === 0) {
return;
}
const ids = pages[page].map(({ id }) => id);
const loading = fetch("/wp-content/themes/porto/getinfomap.php", {
"headers": {
"content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
"body":Qs.stringify({
functionname: "add",
ids,
arguments: [
1,
2
]
}),
"method": "POST",
}).then((res) => res.json()).then(({ html })=>{
const buttonsPrev = displayButtonsprev();
const buttonsNext = displayButtonsnext();
const filtermap = displayFiltermap();
const slidProd = html.replace("columns-4","columns-1").replace(/ pcols\-.?.?\-.?/g, "").replace("products-container", "products-container pcols-lg-12").replace(/href=\".*\/">/g, ">");
document.getElementById("filtermap").innerHTML = filtermap;
document.getElementById("sliderproducts").innerHTML = slidProd;
bindListeners();
});
return loading;
}
const getCoords = () => fetch(`/wp-json/wc/v3/products/attributes/9/terms?${Qs.stringify(keys)}`)
.then((res) => res.json())
const getSubCategories = (products, category) => products
.filter(({ categories }) => categories
.map(({ slug }) => slug).includes(category))
.map(({ categories }) => categories)
.flat()
.filter(({ id, slug }, index, self) => self
.findIndex(({ id: catId }) => id === catId) === index
&& slug !== category);
const getProducts = () => fetch(`/wp-json/wc/v3/products?${Qs.stringify(keys)}`)
.then((res) => res.json())
.then((res) => {
digital=getSubCategories(res,"digital");
static=getSubCategories(res,"static");
products = res.filter(filter);
pages = [products];
getCoords().then(coordsRes=>{
coords = coordsRes.map((coord)=>{
coord.lat=coord.description.split(",")[0].trim();
coord.lng=coord.description.split(",")[1].trim();
return coord;
});
});
});
const goToItem = (id) => {
let itemPage = 0;
pages
.forEach((page, pageIndex) => page
.forEach((product) => {
if (id === product.id) {
itemPage = pageIndex;
}
}))
const setting = setPage(itemPage);
recenterMap(id);
if (setting) {
setting.then(() => {
const markerProduct = document.querySelector(`.post-${id}`);
if (!markerProduct.classList.contains("flash")) {
markerProduct.classList.add("flash");
setTimeout(() => {
markerProduct.classList.remove("flash");
}, 500);
}
})
} else {
const markerProduct = document.querySelector(`.post-${id}`);
if (!markerProduct.classList.contains("flash")) {
markerProduct.classList.add("flash");
setTimeout(() => {
markerProduct.classList.remove("flash");
}, 500);
}
}
}
const getAttribute = (product, attr) => product.attributes.find(({ name }) => name === attr).options[0];
const getCategories = (product) => product.categories.map(({id}) => `${id}`);
const createMarkers = () => {
markers = products.map((product) => {
const {
id,
} = product;
const addres = getAttribute(product, "адрес");
const lat = getAttribute(product, "широта");
const lng = getAttribute(product, "долгота");
var myLatlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatlng,
title: addres
});
marker.setMap(map);
marker.addListener("click", () => {
goToItem(id);
});
marker.id = id;
return marker;
});
}
const setCityView = ({ lat, lng }) => {
const newCenter = new google.maps.LatLng(lat, lng);
map.setCenter(newCenter);
map.setZoom(9);
}
const recenterMap = (centerId) => {
const marker = markers.find(({ id }) => `${id}` === `${centerId}`);
const {
lat: getLat,
lng: getLng,
} = marker.getPosition();
const { lat, lng } = { lat: getLat(), lng: getLng()};
marker.setIcon
const newCenter = new google.maps.LatLng(lat, lng);
map.setCenter(newCenter);
map.setZoom(14);
}
const bindListeners = () => {
const domProducts = Array.from(document.getElementsByClassName("product"));
domProducts.forEach((product) => {
product.addEventListener("click", (e) => {
const productId = Array.from(e.currentTarget.classList).find((c) => c.includes("post-")).slice(5);
recenterMap(productId);
})
})
const citySel = document.getElementById("citySelect");
const selects = document.querySelectorAll("[data-multi-select-plugin]");
selects.forEach(select => {
init(select,"Типы конструкций", "Не найдено типов конструкций");
select.parentElement.onChangeValue = (values) => {
topbuild = values;
console.log(values);
onchangeBox();
};
});
citySel.addEventListener("change", e => {
topcity = e.target.value;
const {
lat="55.752080",
lng="37.617454"
}=coords.find(({name})=>name===topcity) || {};
setCityView({lat,lng})
onchangeBox();
});
}
function onchangeBox() {
setFilter((product)=>{
const prodCity = getAttribute(product, "город");
const prodCat = getCategories(product);
let hasCateg = false;
let hasRoad = false;
if (topbuild.length > 0) {
topbuild.forEach((id)=>{
if (prodCat.includes(id)){
hasCateg = true;
}
})
} else {
hasCateg = true;
}
if (prodCity===topcity && hasCateg){
return true;
}
return false;
})
}
const setFilter = (newfilter) => {
filter = newfilter;
clearMarkers();
getProducts().then(() => {
createMarkers();
displayPage();
});
}
function initMap () {
map = new google.maps.Map(document.getElementById("googlemapnsm"), {center: new google.maps.LatLng(55.803211,37.758585), zoom:9})
getProducts().then(() => {
createMarkers();
displayPage();
});
}
вот как это сейчас выглядит
