import React, { useState } from "react";
import ReactDOM from "react-dom";
import { YMaps, Map } from "react-yandex-maps";
function App() {
const [maps, setMaps] = useState(null);
const [address, setAddress] = useState("");
const getGeoLocation = (e) => {
let coord = e.get("target").getCenter();
let resp = maps.geocode(coord);
resp.then((res) => {
setAddress(res.geoObjects.get(0).getAddressLine());
});
};
const onLoad = (map) => {
setMaps(map);
};
return (
<div className="App">
<div className="center">тут разместить поинтер - указатель центра карты</div>
<YMaps
query={{
apikey: PASTE_APIKEY
}}
>
<Map
defaultState={{
center: [55.72506467778052, 37.596457118908944],
zoom: 16
}}
width="500px"
height="500px"
onBoundsChange={(ymaps) => getGeoLocation(ymaps)}
modules={["geolocation", "geocode"]}
onLoad={(ymaps) => onLoad(ymaps)}
></Map>
{address}
</YMaps>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<div class="select__list">
<span>1</span>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
.select__list{
position: relative;
ul{
top: 0px;
position: absolute;
display: none;
}
}
//при клике на элемент показываем список — селектлист
$('.select__list').click(function(){
$(this).find('ul').show();
});
//при клике на пункт селектлиста — передаем его значение в span (его вам надо будетт передать в input hidden еще, или как у вас там работает форма
$('.select__list li').click(function(){
$(this).parent().parent().find('span').html($(this).html());
//запоминаем порядок элемента, на который мы кликнули (если первый то сдвиг 0, второй сдвиг а высоту li. третий на 2 высоты и т.д.. таким образом он должен быть всегда сдвинут к активной строке)
var top_count = $(this).index();
var li_height = $('.select__list li').height();//ну они конечно в этом случае одинаковыми должны быть
$('.select__list ul').css('top',-(top_count*li_height)+'px');
//так же можно добавить активный класс, чтобы приписать на него стрелочки
$('.select__list li').removeClass('active');
$(this).addClass('active');
//скрываем ul
$(this).find('ul').hide();
});
.toggleSlide(); .toggleClass(); .fadeIn()/fadeOut();
function setheight(){
var clientHeight = document.body.clientHeight;
$('.hei').height(clientHeight);
}
$(document).ready(function() {
function setheight();
});
$(window).resize(function(){
function setheight();
});
$.cookie('cookie_name', 'cookie_value');
$.cookie('cookie_name');
$.cookie('cookie_name', null);