gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 114 forks source link

Custom display of search results #327

Closed lil12t closed 2 years ago

lil12t commented 2 years ago

Hey!

The goal is to do a street search and hide the popup above the label and leave only the label on the map.

image

I found this example but I can't adapt it to react, how can I adapt it to ?

Here is my code: Delivered package.full does not give errors, but default settings are set without my changes

useEffect(() => {

    if (isMapLoaded) {

      const mySearchControl =
        new ymaps.current.control.SearchControl.superclass.constructor({
          options: {
            noPlacemark: true,
          },
        });

      const mySearchResults = new ymaps.current.GeoObjectCollection(null, {
        hintContentLayout:
          ymaps.current.templateLayoutFactory.createClass('$[properties.name]'),
      });

      mapRef.current.controls.add(mySearchControl);
      mapRef.current.geoObjects.add(mySearchResults);
      mySearchResults.events.add('click', function (e: any) {
        e.get('target').options.set('preset', 'islands#redIcon');
      });
      mySearchControl.events
        .add('resultselect', function (e: any) {
          var index = e.get('index');
          mySearchControl.getResult(index).then(function (res: any) {
            mySearchResults.add(res);
          });
        })
        .add('submit', function () {
          mySearchResults.removeAll();
        });
    }
  }, [isMapLoaded]);

        <YMaps
          key={mapLang}
          query={{
            apikey: 'key',
            lang:'ru_RU',
          }}
        >
          <Map
            key={lang}
            state={{ center: defaultPoint, zoom: 15 }}
            height="85%"
            modules={[
              'Placemark',
              'geocode',
              'geoObject.addon.balloon',
              'GeoObjectCollection',
              'controls',
            ]}
            instanceRef={mapRef}
            options={{
              yandexMapDisablePoiInteractivity: true,
              suppressMapOpenBlock: true,
            }}
            onLoad={(ympasInstance) => {
              if (ympasInstance) {
                ymaps.current = ympasInstance;
                setIsMapLoaded(true);
              }
            }}
            width="100%"
            onClick={onMapClick}
          >
            <ZoomControl />
            <GeolocationControl />
            <FullscreenControl />
          </Map>
        </YMaps>