JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1.9/?load=package.full&lang=ru-RU&coordorder=longlat"></script>
<div id="ya_map"></div>
CSS
#ya_map {
width 400px;
height: 400px;
}
JavaScript
ymaps.ready(function () {
ymaps.geolocation.get({
provider: 'yandex',
autoReverseGeocode: true
}).then(function (promise) {
var coordinates = promise.geoObjects.position;
myMap = window.map = new ymaps.Map('ya_map', {
center: [coordinates[0], coordinates[1]],
zoom: 8,
controls: ['geolocationControl', 'zoomControl', 'typeSelector', 'fullscreenControl', 'rulerControl']
});
var mySearchControl = new ymaps.control.SearchControl({
options: {
provider: new CustomSearchProvider(),
results: 5
}});
myMap.controls.add(mySearchControl, { right: 10, top: 10 });
});
});
function CustomSearchProvider() {}
CustomSearchProvider.prototype.geocode = function (request, options) {
var deferred = new ymaps.vow.defer(),
geoObjects = new ymaps.GeoObjectCollection(),
geoObjects2 = new ymaps.GeoObjectCollection(),
// Сколько результатов нужно пропустить.
offset = options.skip || 0,
// Количество возвращаемых результатов.
limit = options.results || 5;
// $.ajax(
// запрос к базе по поиску объектов, содержащих в названии request
// ).then (function(data) {
// for (var i = 0, l = data.length; i < l; i++) {
// var newObj = new ymaps.GeoObject({
// geometry: {
// type: "Point",
// coordinates: [data[i].center_longitude, data[i].center_latitude]
// },
// properties: {
// name: data[i].title,
// description: data[i].country + ', ' + data[i].region
// }
// });
//
// geoObjects.add(newObj);
// }
// var diff = limit - geoObjects.getLength();
ymaps.geocode(request, {
results: 5 // diff
}).then(
function (res) {
//geoObjects = res.geoObjects;
res.geoObjects.each(function (geoObject) {
...