gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
329 stars 116 forks source link

How to set duration? #215

Closed bemulima closed 4 years ago

bemulima commented 4 years ago

Hey guys! Every body can tell me how to set duration after change coords? I tried set duration by options but not working.

let onMapClick = (event) => {
    setYaCoords(event.get("coords"));
        // event.setCenter(getCoords(), event.getZoom(), {'duration': 500}); // not working
    },
    YandexMap = () => {
        return (<YMaps>
            <Map
                state={{ center: getCoords(), zoom: getZoom()}}
                // options={{duration: 500 }} // not working
                width={'100%'}
                height={'350px'}
                onClick={onMapClick.bind(this)}
            >
                <Placemark geometry={getCoords() } />
            </Map>
        </YMaps>);
    };

export default connect(store => { return {...store.yandexMap}})(YandexMap);
bemulima commented 4 years ago

Also I tried get ymap object and by him call setCenter method then set duration. But the result is not successful:

let onMapClick = (event) => {
        console.log('getYmaps()', getYmaps());
        setYaCoords(event.get("coords"));
        //getYmaps().setCenter(getCoords(), getYmaps().getZoom(), {'duration': 1000});
    },
    YandexMap = () => {
        return (<YMaps>
            <Map
                state={{ center: getCoords(), zoom: getZoom()}}
                width={'100%'}
                height={'350px'}
                onClick={onMapClick.bind(this)}
               // instanceRef={ref => {if(getYmaps() === null) setYmaps(ref)}}
            >
                <Placemark geometry={getCoords() } />
            </Map>
        </YMaps>);
    };
bemulima commented 4 years ago

So, I found solution. In begin add base ymaps and placemark objects to state and after change don't connect redux. Just in onClick event set new coords and duration

const onMapClick = (event) => {
        setYaCoords(event.get("coords")); // update coords in state
        getYmaps().setCenter(getCoords(), getYmaps().getZoom(), {'duration': 500});
        getPlacemark().geometry.setCoordinates(getCoords());
    },
    YandexMap = () => {
        return (<YMaps>
            <Map
                state={{ center: getCoords(), zoom: getZoom()}}
                width={'100%'}
                height={'350px'}
                onClick={onMapClick.bind(this)}
                instanceRef={ref => {if(getYmaps() === null) setYmaps(ref)}} // set base ymaps object to state
            >
                <Placemark
                    geometry={getCoords() }
                    instanceRef={ref => {if(getPlacemark() === null) setPlacemark(ref)}}  // set base placemark object to state
                />
            </Map>
        </YMaps>);
    };

export default YandexMap;