Все добрый день. Столкнулся с проблемой.
Создаю маркеры на яндекс карте. Ниже предоставляю код создания яндекс карты с помощью API. Проблема заключается в том, что метки не кликабельны в гугл хроме и именно на андроиде, и то на нескольких моделях смартфонов. В чем может быть проблема? Подскажите решение? Заранее спасибо)
var Ymap = new function() {
this.map = null;
this.placemarks = [];
//this.clusterer = null;
this.temp_pm = null;
this.get_doctors_by_spec = function(spec_id) {
var t = this;
if (!this.map) {alert('map is not initialized!'); return false;}
//jQuery("#cuselFrame-map_spec").addClass("classDisCusel");
$('#maploader').html('загрузка');
$('#maploader').show();
// t.map.events
// .add('mouseenter', function (e) {
// e.get('target').balloon.close();
// if (t.temp_pm)
// t.temp_pm.options.set('iconImageHref', '/img/marker.png');
// });
$.getJSON('/doctor/getmap', {'id':spec_id}, function (data) {
if (!data) {
alert('Произошла неизвестная ошибка');
return false;
}
for (i=0;i<t.placemarks.length;i++) {
t.map.geoObjects.remove(t.placemarks[i]);
}
t.placemarks = [];
/*
if (t.clusterer)
t.map.geoObjects.remove(t.clusterer);
t.clusterer = new ymaps.Clusterer({
// Используем макет балуна кластера "карусель"
clusterBalloonContentBodyLayout: "cluster#balloonCarouselContent",
// Используем собственный подмакет для отображения информации о геообъекте
clusterBalloonContentItemLayout: ClusterBalloonContentItemLayout,
// Устанавливаем ограничение на количество элементов в нижней панели
clusterBalloonPagerSize: 5,
// Установка внешнего вида нижней панели.
// Режим marker рекомендуется использовать с небольшим количеством элементов.
//clusterBalloonPagerType: 'marker',
clusterBalloonHeight: 'auto',
clusterBalloonWidth: 'auto',
});*/
var BalloonContentLayout = ymaps.templateLayoutFactory.createClass('<div class="my_bal_wrap">$[properties.balloonContent]</div><div class="arrow_down"></div>',{
build: function() {
// исполняем конструктор суперкласса
BalloonContentLayout.superclass.build.call(this);
// получает геообъект
var geoObject = this.getData().geoObject,
// карту
map = geoObject.getMap(),
// координаты геообъекта
coords = geoObject.geometry.getCoordinates(),
// контейнер баллуна
container = $(this.getParentElement());
// смещаем контейнер баллуна относительно его привязки, чтобы получилось, что баллун находится по центру над геообъектом
container.find('.my_bal_wrap').each( function() {
$(this).css( {left: -Math.round($(this).outerWidth() / 2), top: -$(this).outerHeight() - 45});
}
);
}
});
for (i=0;i<data.length;i++) {
var pm = new ymaps.Placemark([data[i].latitude, data[i].longitude], {
balloonContent: t.get_marker_text(data[i])
},
{
iconImageHref: '/img/marker.png',
//iconImageSize: [45, 45],
iconImageSize: [30, 45],
//iconImageOffset: [-18, -45],
iconImageOffset: [-15, -45],
balloonLayout: BalloonContentLayout,
balloonAutoPan: false,
balloonOffset: [0,0],
balloonShadow: false,
hideIconOnBalloonOpen: false,
balloonCloseButton : false,
balloonZIndex : 5000
//hintHideTimeout: 0,
//hintHoldByMouse: false
});
pm.events
.add('touchstart', function (e) {
// Ссылку на объект, вызвавший событие,
// можно получить из поля 'target'.
e.get('target').balloon.open();
if (t.temp_pm)
t.temp_pm.options.set('iconImageHref', '/img/marker.png');
t.temp_pm = e.get('target');
e.get('target').options.set('iconImageHref', '/img/marker_hover.png');
//console.log(e.get('target').style);
});
// .add('mouseleave', function (e) {
// // t.map.balloon.close();
// //pm.balloon.close();
// //e.get('target').balloon.close();
// });
t.placemarks.push(pm);
t.map.geoObjects.add(pm);
//alert(t.get_marker_text(data[i]));
}
$('#maploader').html('найдено: '+data.length);
/* t.clusterer.add(t.placemarks);
t.map.geoObjects.add(t.clusterer);*/
})
.fail(function () {
alert('Произошла неизвестная ошибка. Попробуйте позже.');
})
.always(function () {
});
}
this.get_marker_text = function(data) {
//console.log(data);
if (data.spec2)
data.spec1 += ', '+data.spec2;
if (data.spec3)
data.spec1 += ', '+data.spec3;
if (data.patronymic)
data.name += ' '+data.patronymic;
var txt = '<div style="width:230px;"><div class="bal_col1"><img class="ym_avatar" src="/files/doctor/small/'+data.image+'" /><p class="bal_col1_price"><span>'+data.price+'</span> <img src="/img/tenge.png" /></p></div><div class="bal_col2"><p class="bal_col2_header"><a href="/vrach/'+data.alias+'">'+data.surname+' '+data.name+'</a></p><p class="bal_col2_spec">'+data.spec1+'</p><div class="rating_ro_wrap"><div class="rating_ro_content" style="width: '+Math.round(data.rating*16)+'px;"></div></div><p class="bal_col2_addr">'+data.address+'</p><div class="btn-write-small" onclick="Request.showForm('+data.id+',\''+data.surname+' '+data.name+' '+data.patronymic+'\')"></div></div><div class="clear"></div></div>';
return txt;
}
}