Клуб API Карт

Точечные метки в виде islands#blueDotIconWithCaption и с пользовательским изображением

kalash-serg
24 июля, 07:39

Пытаюсь сделать отображение на карте точечных меток как с в виде islands#blueDotIconWithCaption, так и с пользовательским изображением для метки. В результате корректно отображаются только метки с пользовательским изображением. Метка islands#blueDotIconWithCaption отображается значительно бОльшей по размеру и без подписи.

Данные хранятся в виде массива объектов. Поля объекта:

- name - наименование объекта,

- coords - координаты метки,

- description - описание (выводится в baloon'е),

- image - ссылка на картинку (выводится в baloon'е),

- iconimage - ссылка на пользовательское изображение для метки.

Код функции, выводящей метки на карту:

function addPlacemarks(map, geoobjects)
{
	for (var i = 0; i < geoobjects.length; i++) {
		var geoobject = geoobjects[i];

		var balloonContent = "<p>" + getCameraLinkForBalloon(geoobject, i) + "</p>";

		if (geoobject.image) {
			balloonContent = balloonContent + "<p><img src='" + geoobject.image + "' class='balloon-img'/></p>";
		}

		if (geoobject.description) {
			balloonContent = balloonContent + geoobject.description;
		}


		if (geoobject.iconimage === undefined || geoobject.iconimage === "") {																
								var placemarkProperties = {
											iconContent: geoobject.name,
											iconCaption: geoobject.name,
											balloonContentHeader: geoobject.name,
											balloonContent: balloonContent,			
													};

								var placemarkOptions = {
											preset: "islands#blueDotIconWithCaption",
											iconImageSize: [5, 5], 
													};
													/**/
					} {
								var placemarkProperties = {
											hintContent: geoobject.name,
											balloonContentHeader: geoobject.name,
											balloonContent: balloonContent,			
													};

								var placemarkOptions = {
											iconLayout: 'default#imageWithContent',
											iconImageHref: geoobject.iconimage,	
											iconImageSize: [80, 80], 
											iconImageOffset: [-40, -40],
													};
					}

		var placemark = new ymaps.Placemark(geoobject.coords, placemarkProperties, placemarkOptions);
		map.geoObjects.add(placemark);
	}
}

Прошу разъяснить, как корректно реализовать отображение как стандартных меток, так и пользовательских.

1 комментарий
Подписаться на комментарии к посту
Функция в текущем виде выглядит жутковато. Можно сделать несколько улучшений:
1. Убрать разметку балуна в макет
var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
  '<p>{{ properties.cameraLinkForBalloon|raw }}</p>',
  '{% if properties.imageForBalloon %}',
    '<p><img src="{{ properties.imageForBalloon }}" class='balloon-img'/></p>',
  '{% endif %}',
  '{{ properties.description }}'
].join(''));


2. Убрать повторяющиеся опции смешения кастомной иконки в свой пресет
ymaps.option.presetStorage.add('my#icon', {
  iconLayout: 'default#imageWithContent',
  iconImageSize: [80, 80],
  iconImageOffset: [-40, -40]
});


3. Зачем проверять на undefined и "", если можно написать if(geoobject.iconimage) {...}
4. В javascript нет block scope
5. Не создавать лишних переменных:
geoobjects.forEach(function (geoObject, i) {
  map.geoObjects.add(new ymaps.Placemark(geoObject.coords, {
      iconContent: geoObject.name,
      hintContent: geoObject.name,
      balloonContentHeader: geoObject.name,
      iconCaption: geoObject.name,
      cameraLinkForBalloon: getCameraLinkForBalloon(geoObject, i),
      imageForBalloon: geoObject.image,
      description: geoObject.description
    }, {
      balloonContentLayout: MyBalloonContentLayout,
      iconImageHref: geoObject.iconimage,
      preset: geoObject.iconimage ? 'my#icon' : 'islands#blueDotIconWithCaption'
    }));
});


Насчет размера метки – нужна ссылка на минимальный пример на jsfiddle с вашими данными, на котором можно увидеть проблему.
Обновлено 24 июля, 09:23