<div class='tbody'><a href="" class='tr coord' data-long='55.606878' data-lat='37.524767'> <div class='td names'>Сервис КЭМП Ясенево</div> <div class='td coord__address'>Москва, ул. Вильнюсская 1</div> <div class='td coord__phones'><span>(495)422-29-92</span></div> <div class='td coord__schedule'><span>с 9:00 до 22:00</span><span>Ежедневно</span></div> </a> <a href='' class='tr coord' data-long='55.372774' data-lat='37.783078'> <div class='td names'>Сервис КЭМП Домодедово</div> <div class='td coord__address'>Московская область, <br>г. Домодедово, <br>мкр-н Востряково, <br>ул. Заборье, д.1Д <br>(46-й км Каширского шоссе)</div> <div class='td coord__phones'><span>(49679)66-700,</span><span>(49679)66-491,</span><span>(495)926-3208</span></div> <div class='td coord__schedule coord__schedule'><span>с 8:00 до 21:00</span><span>Ежедневно</span></div> </a> <a href='' class='tr coord' data-long='54.920635' data-lat='37.404222'> <div class='td names'>Сервис КЭМП Серпухов</div> <div class='td coord__address'>142211, Московская область, г.Серпухов, <br>ул. Урицкого, д. 1.</div> <div class='td coord__phones'><span>(495)556-65-76,</span><span>(495)556-63-34,</span><span>495)926-32-08</span></div> <div class='td coord__schedule'><span>с 9:00 до 21:00</span><span>Ежедневно</span></div> </a> <a href='' class='tr coord' data-long='55.599591' data-lat='38.098045'> <div class='td names'>Сервис КЭМП Жуковский</div> <div class='td coord__address'>Московская область, город Жуковский, ул. Мясищева, д. 16а</div> <div class='td coord__phones'><span>(495)422-29-92</span></div> <div class='td coord__schedule'><span>с 9:00 до 21:00</span><span>Ежедневно</span></div> </a> </div>
Доброго дня!
Пытаюсь центрировать метки на карте и никак не получается. Все координаты подтягиваю из верски, т.е. банально из атрибутов и разношу метки. Вопрос стал ребром, когда необходимо по координатам меток все же центрировать карту. Пытался использовать getBound(), но не вышло.
Выше код, откуда беру координаты
function init () { var myMap = new ymaps.Map('map', { center: [55.3172, 37.523285], zoom: 9, controls: [] }, { searchControlProvider: 'yandex#search' }), objectManager = new ymaps.ObjectManager({ clusterize: true }),currentId = 0; MyBalloonLayout = ymaps.templateLayoutFactory.createClass( '<div class="popover top">' + '<a class="close" href="#">×</a>' + '<div class="arrow"></div>' + '<div class="balloon">' + '$[[options.contentLayout observeSize minWidth=246 maxWidth=246]]' + '</div>' + '</div>', { build: function () { this.constructor.superclass.build.call(this); this._$element = $('.popover', this.getParentElement()); this.applyElementOffset(); this._$element.find('.close') .on('click', $.proxy(this.onCloseClick, this)); }, clear: function () { this._$element.find('.close') .off('click'); this.constructor.superclass.clear.call(this); }, onSublayoutSizeChange: function () { MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments); if(!this._isElement(this._$element)) { return; } this.applyElementOffset(); this.events.fire('shapechange'); }, applyElementOffset: function () { this._$element.css({ left: -((this._$element[0].offsetWidth + 18) / 2), top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight + 10) }); }, onCloseClick: function (e) { e.preventDefault(); this.events.fire('userclose'); objectManager.objects.options.set({ iconLayout: 'default#image', iconImageHref: 'prod/img/marker.png' }); }, getShape: function () { if(!this._isElement(this._$element)) { return MyBalloonLayout.superclass.getShape.call(this); } var position = this._$element.position(); return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([ [position.left, position.top], [ position.left + this._$element[0].offsetWidth, position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight ] ])); }, _isElement: function (element) { return element && element[0] && element.find('.arrow')[0]; } }), MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass( '<h3 class="balloon__title">$[properties.balloonHeader]</h3>' + '<div class="balloon__content">$[properties.balloonContent]</div>' ); objectManager.objects.options.set({ iconLayout: 'default#image', iconImageHref: 'prod/img/marker.png', iconImageSize: [20, 27], balloonShadow: false, balloonLayout: MyBalloonLayout, balloonContentLayout: MyBalloonContentLayout, balloonPanelMaxMapArea: 0 }); function onObjectEvent (e) { var objectId = e.get('objectId'); if (e.get('type') == 'mouseenter') { objectManager.objects.setObjectOptions(objectId, { iconLayout: 'default#image', iconImageHref: 'prod/img/pin.png' }); } if (e.get('type') == 'mouseleave') { objectManager.objects.setObjectOptions(objectId, { iconLayout: 'default#image', iconImageHref: 'prod/img/marker.png' }); } if (e.get('type') == 'click') { objectManager.objects.setObjectOptions(objectId, { iconLayout: 'default#image', iconImageHref: 'prod/img/marker.png' }); } } objectManager.objects.events.add(['mouseenter', 'mouseleave', 'click'], onObjectEvent); zoomControl = new ymaps.control.ZoomControl({ options: { position: { top: 28, left: 17 } } }); myMap.controls.add(zoomControl); var myObjects = [], location = []; $('.coord').each(function(index){ var cur_coords = []; cur_coords[0] = $(this).data('long'); cur_coords[1] = $(this).data('lat'); cur_coords[2] = $(this).find('.names').text(); cur_coords[3] = $(this).find('.coord__address').text(); cur_coords[4] = $(this).find('.coord__phones').html() || ''; cur_coords[5] = $(this).find('.coord__schedule').html(); location[index] = cur_coords; }); var coordinates = location; for (var i = 0, l = coordinates.length; i < l; i++) { var coord = coordinates[i]; console.log(coord[3]) myObjects.push({ type: "Feature", id: currentId++, geometry: { type: 'Point', coordinates: [coord[0],coord[1]] }, properties: { balloonHeader: coord[2], balloonContent: "<div class='balloon__address'>" + coord[3] + "</div><div class='balloon__row'>" + "<div class='balloon__col'>" + coord[4] + "</div>" + "<div class='balloon__col'>" + coord[5] + "</div>" + "</div>" , // "clusterCaption": "Еще одна метка" } }); } objectManager.add(myObjects); myMap.geoObjects.add(objectManager); objectManager.getBounds() };
Подскажите, что не верно?