1

Яндекс карта api 2.1. Вместо стандартной метки, ставится верстка. Нужно по нажатию на метку, добавлять класс в верстку которая находится в данной метке, а у остальных удалять класс. Event у метки я понял как добавить

place.events.add('click', function (e) {});

А как теперь взять класс блока который внутри этой метки, и добавить к ниму еще один???

var myMap, ymaps;
// Инициализировать карту
function init_point_map() {
  var winWidth = $(window).width();
  myMap = document.getElementById("map");
  if (!myMap) return;
  myMap = new ymaps.Map(myMap, {
    center: [55.753215, 37.622504],
    zoom: 11,
    controls: []
  });

  myMap.controls.add("zoomControl", {});
  if (winWidth <= 1024) {
    myMap.behaviors.disable('drag');
  }

  var data = {
    'points': [{
        "infoPoint": '<div class="point">\
				<div class="point__temp-wrp">\
					<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
					<div class="point__temp_road">\
						<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
						10.6 С <sup>o</sup>\
					</div>\
					<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
				</div>\
			</div>',
        "latitude": 55.737789,
        "longitude": 37.524173,
      },
      {
        "infoPoint": '<div class="point">\
				<div class="point__temp-wrp point__temp-wrp_red">\
					<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
					<div class="point__temp_road">\
						<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
						10.6 С <sup>o</sup>\
					</div>\
					<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
				</div>\
			</div>',
        "latitude": 55.703489,
        "longitude": 37.605884,
      }
    ],
  };

  var results = [];
  data.points.forEach(function(item, index) {
    results.push(createPlacemark(item));
  });
}


// Создать метку
function createPlacemark(item) {
  var options = Object();
  var squareLayout = ymaps.templateLayoutFactory.createClass(item.infoPoint);
  var place = new ymaps.Placemark(
    [item.latitude, item.longitude], {
      hintContent: false
    }, {
      iconLayout: squareLayout,
      iconShape: {
        type: 'Rectangle',
        coordinates: [
          [-12, -20],
          [192, 12]
        ]
      }
    }
  );
  place.events.add('click', function(e) {
  
  });
  myMap.geoObjects.add(place);
}

$(document).ready(function() {
  if (ymaps != undefined) ymaps.ready(init_point_map);
});
#map {
  width: 600px;
  height: 450px;
}

.point {
  position: absolute;
  z-index: 123;
  width: 12px;
  height: 12px;
  top: -6px;
  left: -6px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #12ac0f;
}

.point_active {
  transform: scale(1.5);
}

.point__temp-wrp {
  position: absolute;
  min-width: 150px;
  height: 20px;
  left: 24px;
  top: 50%;
  margin-top: -10px;
  color: #fff;
  font-size: 12px;
  background-color: #97d830;
  line-height: 12px;
}

.status-weather {
  background-color: #76ab22;
}

.point__temp-wrp_red {
  background-color: #b2152f;
}

.point__temp-wrp_red .point__temp:before {
  border-right-color: #901328;
}

.point__temp-wrp_red .status-weather {
  background-color: #901328;
}

.point__temp {
  float: left;
  position: relative;
  padding-left: 30px;
  padding-right: 7px;
  height: 20px;
}

.point__temp:before {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -10px;
  border-right: 10px solid #76ab22;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.point__temp .status-weather {
  width: 25px;
  background-size: 15px;
}

.point__temp_road {
  float: left;
  position: relative;
  padding-left: 12px;
  height: 20px;
}

.point__temp_road .icon {
  width: 10px;
  height: 12px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
}

.point-photo {
  position: absolute;
  left: 100%;
  width: 20px;
  height: 20px;
  float: left;
  background-color: #fff;
}

.point-photo .icon {
  width: 12px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

1 ответ 1

2

Сам решил проблему)))

					var myMap,ymaps;
			// Инициализировать карту
			function init() {
				var winWidth = $(window).width();
				myMap = document.getElementById("map");
				if (!myMap) return;
				myMap = new ymaps.Map(myMap, {
					center: [55.753215, 37.622504],
					zoom: 11, 
					controls: []
				});

				myMap.controls.add("zoomControl", {});
				//myMap.behaviors.disable('scrollZoom');
				if(winWidth <= 1024){
					myMap.behaviors.disable('drag');
				}
				

  var data = {
    'points': [{
        "infoPoint": '<div class="point{% if properties.active %} point_active{% endif %}">\
				<div class="point__temp-wrp">\
					<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
					<div class="point__temp_road">\
						<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
						10.6 С <sup>o</sup>\
					</div>\
					<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
				</div>\
			</div>',
        "latitude": 55.737789,
        "longitude": 37.524173,
      },
      {
        "infoPoint": '<div class="point{% if properties.active %} point_active{% endif %}">\
				<div class="point__temp-wrp point__temp-wrp_red">\
					<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
					<div class="point__temp_road">\
						<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
						10.6 С <sup>o</sup>\
					</div>\
					<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
				</div>\
			</div>',
        "latitude": 55.703489,
        "longitude": 37.605884,
      }
    ],
  };

				var myCollection = new ymaps.GeoObjectCollection();

				var results = [];
				data.points.forEach(function(item, index){
						results.push(createPlacemark(item));
				});
				myMap.geoObjects.add(myCollection);

			// Создать метку
				function createPlacemark(item) {
					var options = Object();
					var squareLayout = ymaps.templateLayoutFactory.createClass(item.infoPoint);
					var place = new ymaps.Placemark(
						[item.latitude, item.longitude],
						{
							hintContent: false
						}, 
						{
				      iconLayout: squareLayout,
				      iconShape: {   
				          type: 'Rectangle',
				          coordinates: [
				            [-12, -20], [192, 12]
				          ]
				      }
				    }
					);
					myCollection.add(place);
				}
				var thatCoordinates;
				myCollection.events.add('click', function (e) {
					//myCollection.get('target').properties.set('active', false);
					var that = e.get('target').properties.get('active');
					myCollection.each(function(item, index){
						item.properties.set('active', false);
						if(e.get('target') == item && !that){
							e.get('target').properties.set('active', true);
							thatCoordinates = e.get('coords');
						}
					});
				});
			}

			$(document).ready(function(){
				if (ymaps != undefined) ymaps.ready(init);
			});
#map {
 position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.point {
  position: absolute;
  z-index: 123;
  width: 12px;
  height: 12px;
  top: -6px;
  left: -6px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #12ac0f;
}

.point_active {
  transform: scale(1.5);
}

.point__temp-wrp {
  position: absolute;
  min-width: 150px;
  height: 20px;
  left: 24px;
  top: 50%;
  margin-top: -10px;
  color: #fff;
  font-size: 12px;
  background-color: #97d830;
  line-height: 12px;
}

.status-weather {
  background-color: #76ab22;
}

.point__temp-wrp_red {
  background-color: #b2152f;
}

.point__temp-wrp_red .point__temp:before {
  border-right-color: #901328;
}

.point__temp-wrp_red .status-weather {
  background-color: #901328;
}

.point__temp {
  float: left;
  position: relative;
  padding-left: 30px;
  padding-right: 7px;
  height: 20px;
}

.point__temp:before {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -10px;
  border-right: 10px solid #76ab22;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.point__temp .status-weather {
  width: 25px;
  background-size: 15px;
}

.point__temp_road {
  float: left;
  position: relative;
  padding-left: 12px;
  height: 20px;
}

.point__temp_road .icon {
  width: 10px;
  height: 12px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
}

.point-photo {
  position: absolute;
  left: 100%;
  width: 20px;
  height: 20px;
  float: left;
  background-color: #fff;
}

.point-photo .icon {
  width: 12px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.