请告诉我。情况：有一张带点的地图。有一个 showInfo 函数，可以移动地图的“视线”、更改缩放以及信息块中活动点的信息。
我希望当点击某个点时触发这个函数。我无法想象该函数该放在哪里，因为我不理解（并且不再想理解）Yandex 地图 api 是如何工作的。
我只对善良的人抱有希望，因为我太累了，我的大脑已经停止运转了
initMap();
ymaps3.readyasync function initMap() { //当主 API 模块的所有组件加载完毕后，promise将被解析 wait ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls, YMapLayer, YMapFeatureDataSource} = ymaps3;
const {YMapZoomControl} = await ymaps3.import('@yandex/[email protected]');
// Добавляем кластеризатор
const {YMapClusterer, clusterByGrid} = await ymaps3.import('@yandex/[email protected]');
// Иницилизируем карту
const map = new YMap(
// Передаём ссылку на HTMLElement контейнера
document.getElementById('map'),
// Передаём параметры инициализации карты
{
location: {
// Координаты центра карты
center: [37.588144, 55.733842],
// Уровень масштабирования
zoom: 10
}
}
);
// Добавляем слой для отображения схематической карты
map.addChild(new YMapDefaultSchemeLayer({ customization: mapCustomizationJSON }));
// Добавляем к карте ресурс
map.addChild(new YMapFeatureDataSource({id:'my-source'}));
// Добавляем ресурс на карту
map.addChild(new YMapLayer({source: 'my-source', type: 'markers', zIndex:1800}));
// Пин
const contentPin = document.createElement('div');
contentPin.innerHTML = '<img style="width:20px;" src="https://www.freepnglogos.com/uploads/pin-png/pin-transparent-png-pictures-icons-and-png-backgrounds-36.png" />';
// Функция создания маркера (или че это)
function marker(feature) {
const yMapMarker = new ymaps3.YMapMarker(
{
coordinates: feature.geometry.coordinates,
source: 'my-source'
},
contentPin.cloneNode(true)
);
// yMapMarker.events.add('click', () => {
// showInfo(feature);
// });
return yMapMarker;
}
const cluster = (coordinates, features) =>
new ymaps3.YMapMarker(
{
coordinates,
source: 'my-source'
},
circle(features.length).cloneNode(true)
);
function circle(count) {
const circle = document.createElement('div');
circle.classList.add('circle');
circle.innerHTML = `
<div class="circle-content"><span class="circle-text">${count}</span></div>`;
return circle;
}
const points = pointsData.map((point, i) => ({
type: 'Feature',
id: i,
geometry: {coordinates: [point.acf_fields.coordinates.y, point.acf_fields.coordinates.x]},
properties: {
name: point.acf_fields.point_name,
// другие свойства
}
}))
const clusterer = new YMapClusterer({
method: clusterByGrid({gridSize: 64}),
features: points,
marker,
cluster
});
map.addChild(clusterer);
// Пытаюсь добавить кнопку Зума
map.addChild(
// Using YMapControls you can change the position of the control
new YMapControls({position: 'right'})
// Add the zoom control to the map
.addChild(new YMapZoomControl({}))
);
map.addChild(new YMapDefaultFeaturesLayer());
// Функция отображения информации
function showInfo(feature) {
const infoElement = document.getElementById('point-info-container');
// Вставляем в элемент inf-block данные, которые мы получим из переменной point
document.getElementById('point-info__name').innerText = 'Info';
document.getElementById('point-info__address').innerText = 'text';
infoElement.style.display = 'block';
map.update({
location: {
center: feature.geometry.coordinates,
zoom: 14,
duration: 1000,
}
});
}
Ps 据我了解，这可以通过标记（功能）来完成。我试着这样做
function marker(feature) {
const yMapMarker = new ymaps3.YMapMarker(
{
coordinates: feature.geometry.coordinates,
source: 'my-source'
},
contentPin.cloneNode(true)
);
yMapMarker.events.add('click', () => {
showInfo(feature);
});
return yMapMarker;
}
但我得到了一个错误。
test:55 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'add')
at Object.marker (test:55:27)
at c._getEntity (clusterer.js:1:1093)
at clusterer.js:1:1228
at Array.forEach (<anonymous>)
at c._getVisibleEntities (clusterer.js:1:1202)
at c._render (clusterer.js:1:1916)
at c._onAttach (clusterer.js:1:2319)
at c.AEC__implAttach (main.js:1:58810)
at c.C57__implAttachTo (main.js:1:58391)
at d._addDirectChild (main.js:1:61583)
