Клуб API Карт

Выбор ближайшего объекта.

rassola
21 января 2016, 15:29

 

Здравствуйте. Необходимо при условии если маркер не попал на какой то объект то маркер магнитился к ближайшему объекту. Пока что удалось релизовать только определение адреса на котором стоит маркер.

Сейчас это выглядит так:

  

 

 <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="https://yandex.st/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
ymaps.ready(function () {
// Пример реализации собственного элемента управления на основе наследования от collection.Item.
// Элемент управления отображает название объекта, который находится в центре карты.

function posCenter(){
var t = $('#map-holder').width()/2 -26;
var l = $('#map-holder').height()/2 -90
$('.marker').css({left: t+'px', top: l+'px'});
//alert(1);
}


// Создаем собственный класс.
var CustomControlClass = function (options) {
CustomControlClass.superclass.constructor.call(this, options);
this._$content = null;
this._geocoderDeferred = null;
};
// И наследуем его от collection.Item.
ymaps.util.augment(CustomControlClass, ymaps.collection.Item, {
onAddToMap: function (map) {
CustomControlClass.superclass.onAddToMap.call(this, map);
this._lastCenter = null;
this.getParent().getChildElement(this).then(this._onGetChildElement, this);
},

onRemoveFromMap: function (oldMap) {
this._lastCenter = null;
if (this._$content) {
this._$content.remove();
this._mapEventGroup.removeAll();
}
CustomControlClass.superclass.onRemoveFromMap.call(this, oldMap);
},

_onGetChildElement: function (parentDomContainer) {
// Создаем HTML-элемент с текстом.
this._$content = $('<div class="customControl"></div>').appendTo(parentDomContainer);
this._mapEventGroup = this.getMap().events.group();
// Запрашиваем данные после изменения положения карты.
this._mapEventGroup.add('boundschange', this._createRequest, this);
// Сразу же запрашиваем название места.
this._createRequest();
},

_createRequest: function() {
var lastCenter = this._lastCenter = this.getMap().getCenter().join(',');
// Запрашиваем информацию о месте по координатам центра карты.
ymaps.geocode(this._lastCenter, {
// Указываем, что ответ должен быть в формате JSON.
json: true,
// Устанавливаем лимит на кол-во записей в ответе.
results: 1
}).then(function (result) {
// Будем обрабатывать только ответ от последнего запроса.
if (lastCenter == this._lastCenter) {
this._onServerResponse(result);
}
}, this);
},

_onServerResponse: function (result) {
// Данные от сервера были получены и теперь их необходимо отобразить.
// Описание ответа в формате JSON.
var members = result.GeoObjectCollection.featureMember,
geoObjectData = (members && members.length) ? members[0].GeoObject : null;

if (geoObjectData) {
this._$content.text(geoObjectData.metaDataProperty.GeocoderMetaData.text);
}
}
});

// Создаем собственный класс.
CustomControlClass2 = function (options) {
CustomControlClass2.superclass.constructor.call(this, options);
this._$content = null;
};
// И наследуем его от collection.Item.
ymaps.util.augment(CustomControlClass2, ymaps.collection.Item, {
onAddToMap: function (map) {
CustomControlClass2.superclass.onAddToMap.call(this, map);
this.getParent().getChildElement(this).then(this._onGetChildElement, this);
},
onRemoveFromMap: function (oldMap) {
if (this._$content) {
this._$content.remove();
}
CustomControlClass2.superclass.onRemoveFromMap.call(this, oldMap);
},
_onGetChildElement: function (parentDomContainer) {
// Создаем HTML-элемент с текстом.
this._$content = $('<div class="marker"></div>').appendTo(parentDomContainer);
posCenter();
}
});

var myGeocoder = ymaps.geocode("г. Москва Большая Пионерская улица, 24");
myGeocoder.then(
function (res) {
//myMap.geoObjects.add(res.geoObjects);
var firstGeoObject = res.geoObjects.get(0),
coords = firstGeoObject.geometry.getCoordinates(),
bounds = firstGeoObject.properties.get('boundedBy');


var map = new ymaps.Map("map-holder", {
center: [55.819543, 37.611619],
zoom: 6,
controls: []
}
)


var customControl = new CustomControlClass();
map.controls.add(customControl, {
float: 'none',
position: {
top: 10,
left: 10
}
});

var customControl2 = new CustomControlClass2();
map.controls.add(customControl2, {
float: 'none',
position: {
}
});


map.setBounds(bounds, {
checkZoomRange: true
});

var zoomControl = new ymaps.control.ZoomControl({
options: {
size: "small",
position: { top: 20, left: 20 }
}
});
map.controls.add(zoomControl);


},
function (err) {
// обработка ошибки
}
);
})
</script>

<style>
.marker{
background: url('https://yabs.yandex.ru/resource/CXbACNS1xLfuwhc_IbTVP5_banana_20141031_60-60.png') no-repeat;
background-size: 73px 90px;
width: 73px;
height: 90px;
position:absolute;
z-index: 9999;
}
</style>

<div style="width:100%; height:100%;" id="map-holder" class="client-map__holder"></div>

 

 

 

1 комментарий
Подписаться на комментарии к посту

что именно не получается?