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);<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="HandheldFriendly" content="true"/>block1{
position: relative;
}block2{
position: absolute;
bottom: 0;
}<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();
});<img src width="100" height="100"/> тогда она не будет размытой
element{
width: 100vw; /* или 100% */
height: 100vh;
/* и/или height вычислять в js через document.body.clientHeight и там же задавать
$('element').height(document.body.clientHeight); на ready и resize function*/
}