主页 / user-522426

aliver's questions

Martin Hope
aliver
Asked: 2024-10-18 22:41:18 +0000 UTC
  • 5

请告诉我。情况：有一张带点的地图。有一个 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)
yandex-maps-api