主页 / 问题 / 1432572
Accepted
Денис Беспалов
Asked:2022-08-24 18:51:03 +0800 CST2022-08-24 18:51:03 +0800 CST

react-yandex-map 动态标记添加

  • 772

我需要使用坐标向地图动态添加标签。现在代码是这样的

 const placemarkRef = useRef(null);
 const mapRef = useRef(null);

const clickFunc = () => {
          placemarkRef.current = createPlacemark( [54.738276, 20.489808] )
          mapRef.current.geoObjects.add(placemarkRef.current);
}

const createPlacemark = (coords) => {
    return new mapRef.current.Placemark(
      coords,
      {
        iconCaption: 'какое то имя'
      },
      {
        hintContent: 'Надпись',
        preset: "islands#violetDotIconWithCaption",
        draggable: false
      }
    );
  };

 const mapFunc = () => {
    return <YMaps 
            enterprise
            query={{
            load: "package.full", //отключаем модули. Используем стандартное поведение(полная загрузка)
            apikey: "КЛЮЧ"
            }}>
                <Map
                onLoad={ymaps => mapRef.current = ymaps }
                defaultState={{ center: [54.738276, 20.489808], zoom: 11 }}
                instanceRef={mapRef.current}
                >
            </Map>
        </YMaps>
}

return <div>{mapFunc()}
            <button onClick={() => clickFunc()} />НАЖМИ МЕНЯ</button>
       </div>

出于某种原因，这不起作用，尽管从所有示例和文档来看，它应该起作用。我在调试时注意到 geoObjects 在行中

mapRef.current.geoObjects.add(placemarkRef.current);

由于某种原因undefiened，所有其他属性都已mapRef.current到位

如您所见，其余属性都已到位，但geoObjects没有。虽然这个属性应该在 yandex API 文档中，例如这里https://yandex.ru/dev/maps/jsbox/2.1/placemark

在此处输入图像描述

reactjs

1 个回答

  1. Best Answer

    明白是什么问题了。地图初始化不正确（添加 ref 和 onLoad）

    它是：

    <Map
            onLoad={ymaps => mapRef.current = ymaps }
            instanceRef={mapRef.current}
            >

    应该：

     <Map
                instanceRef={mapRef}
                onLoad={ymaps => setYmaps(ymaps) }

    react useState 钩子在哪里setYmaps使用。之后，我们可以单独访问 ymaps 提供程序（我们的钩子，在 onLoad 中设置）并单独访问 map mapRef.current。在所有这些操作之后，我们可以使用 geoObjects 属性和其他属性。一般来说，我们可以获得完全访问权限。

    • 0

相关问题