javascript - 生成具有不同数据的元素

Question

我正在尝试编写一个代码，它允许我在地图上显示 8 个具有不同数据（位置、图像、替代文本等）的引脚，但是当我运行代码时，我得到 8 个具有完全相同数据的引脚。我究竟做错了什么？就我而言， getRandomInt 函数应该产生各种数据，并且由于它随后在 for 循环中使用，因此每次数据都应该不同。但我想我没有正确理解某些东西，所以如果可以，请帮助我。

提前致谢！

'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;

var getRandomInt = function (min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};

var similarAds = {
  'author': {
    'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
  },
  'offer': {
    'type': TYPES[getRandomInt(0, TYPES.length - 1)],
  },

  'location': {
    'x': getRandomInt(0, mapOverlay.offsetWidth),
    'y': getRandomInt(130, 630),
  }
};

var renderPin = function (pinData) {
  var element = document.createElement('button');
  var newImage = document.createElement('img');
  element.className = 'map__pin';
  element.style.top = pinData.location.y + 'px';
  element.style.left = pinData.location.x + 'px';
  newImage.src = pinData.author.avatar;
  newImage.alt = pinData.offer.type;
  element.appendChild(newImage);
  return element;
};

var renderPins = function () {
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < ADS_COUNT; i++) {
    fragment.appendChild(renderPin(similarAds));
  }
  pins.appendChild(fragment);
};

map.classList.remove('map--faded');
renderPins();

/* Общие стили. Каркас
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
      url("../fonts/Roboto-Bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
      url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
      url("../fonts/Roboto-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.content-box-component {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  -webkit-clip-path: inset(100%);

          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.hidden {
  display: none;
}

body {
  max-width: 1200px;
  margin: 0 auto;

  color: #353535;
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 16px;

  background-color: #f0f0ea;
}

fieldset {
  margin: 0;
  padding: 0;

  border: 0;
}


/* Карта с объявлениями
   ========================================================================== */

.promo {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 50%;

  width: 211px;
  height: 45px;

  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.map {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  overflow: hidden;
  height: 750px;

  background-color: #82bcc0;
  background-image: url("../img/map.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;

  border-radius: 0 0 10px 10px;
}

.map__pins {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.map__overlay {
  position: absolute;

  width: 100%;
  height: 100%;

  -webkit-transition: opacity 300ms ease-in;
  -o-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;

  opacity: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.map__title {
  width: 100%;
  margin: 0;
  padding: 0;
  margin-top: 170px;

  font-size: 85px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

.map--faded .map__overlay {
  opacity: 1;
}


/**
 * Метка объявления
 */

.map__pin {
  position: absolute;
  z-index: 1;

  width: 50px;
  height: 70px;
  margin: 0;
  padding: 0;

  border: 0;
  background: none;
}

.map__pin:focus {
  outline: none;
  -webkit-filter: drop-shadow(0 0 5px red);
          filter: drop-shadow(0 0 5px red);
}

.map__pin img {
  position: absolute;
  z-index: 1;

  top: 5px;
  left: 0;
  right: 0;
  margin: auto;

  border-radius: 50%;
}

.map__pin:not(.map__pin--main)::after {
  content: "";
  position: absolute;

  width: 50px;
  height: 70px;

  top: 0;
  left: 0;

  background-image: url("../img/pins.svg");
  background-repeat: no-repeat;
  background-position: 0 -9px;
}

.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
  background-position: 0 -88px;
}

.map__pin:active img,
.map__pin--active img {
  -webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
          box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}

.map__pin--main {
  width: 65px;
  height: 65px;

  cursor: move;
}

.map__pin--main img {
  position: relative;
  z-index: 1;

  padding: 2px 6px 6px;

  -webkit-transform: translateY(-7px);
      -ms-transform: translateY(-7px);
          transform: translateY(-7px);

  border: solid 5px #ff5635;
  border-radius: 50%;
  background-color: #ffffff;

  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.map__pin--main:active img,
.map__pin--main--active img {
  background-color: #ffffff;
}

.map__pin--main svg {
  position: absolute;
  z-index: 0;
  top: -50px;
  left: -47px;

  width: 156px;
  height: 156px;

  -webkit-transition: -webkit-transform 300ms ease-in;
  transition: -webkit-transform 300ms ease-in;
  -o-transition: transform 300ms ease-in;
  transition: transform 300ms ease-in;
  transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
  -webkit-transform: rotate(120deg) scale(0);
      -ms-transform: rotate(120deg) scale(0);
          transform: rotate(120deg) scale(0);
  -webkit-transform-origin: 78px 78px;
      -ms-transform-origin: 78px 78px;
          transform-origin: 78px 78px;
}

.map__pin--main:hover ellipse {
  fill: rgba(255, 86, 53, 0.9);
}

.map__pin--main::after {
  position: absolute;
  top: 100%;
  left: 50%;

  width: 0;
  height: 0;

  content: "";

  border: solid 5px transparent;
  border-top: solid 18px #fff;
  border-bottom: 0;

  -webkit-transition: -webkit-transform 300ms ease-in;
  transition: -webkit-transform 300ms ease-in;
  -o-transition: transform 300ms ease-in;
  transition: transform 300ms ease-in;
  transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
  -webkit-transform: translate(-50%, -6px);
      -ms-transform: translate(-50%, -6px);
          transform: translate(-50%, -6px);

  border-top-width: 22px;
  border-top-color: #ff5635;
}

.map--faded .map__pin--main svg {
  -webkit-transform: rotate(-20deg) scale(1);
      -ms-transform: rotate(-20deg) scale(1);
          transform: rotate(-20deg) scale(1);
}

.map--faded .map__pin--main::after {
  -webkit-transform: translate(-50%, -30px);
      -ms-transform: translate(-50%, -30px);
          transform: translate(-50%, -30px);
}

.map__pin--main text {
  font-size: 7px;
  font-weight: 700;

  fill: #ffffff;
}


/**
 * Фильтры объявления
 */

.map__filters-container {
  width: 100%;
  background-color: rgba(3, 28, 45, 0.5);
}

.map__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  width: 960px;
  height: 46px;
  margin: 0 auto;

  -webkit-transition: opacity 300ms ease-in;
  -o-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;

  opacity: 1;
}

.map--faded .map__filters {
  opacity: 0;
}

.map__filter {
  height: 30px;
  margin-right: 10px;

  font-size: 14px;
  vertical-align: middle;
  cursor: pointer;

  border: 1px solid transparent;
}

.map__filter:hover {
  border: 1px solid #ffaa99;
}

.map__filter:focus {
  outline: none;
  -webkit-box-shadow: 0 0 2px 2px #ff6547;
          box-shadow: 0 0 2px 2px #ff6547;
}

.map__feature {
  display: inline-block;
  overflow: hidden;

  width: 30px;
  height: 28px;

  font-size: 0;
  vertical-align: middle;
  cursor: pointer;

  background-color: #f8f8f8;
  background-image: url("../img/sprite-feature.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 345px;

  border-radius: 3px;
}

.map__feature--wifi {
  background-position: 2px 5px;
}

.map__checkbox:checked + .map__feature--wifi {
  background-position: 2px -172px;
}

.map__feature--dishwasher {
  background-position: 2px -25px;
}

.map__checkbox:checked + .map__feature--dishwasher {
  background-position: 2px -202px;
}

.map__feature--parking {
  background-position: 3px -55px;
}

.map__checkbox:checked + .map__feature--parking {
  background-position: 2px -232px;
}

.map__feature--washer {
  background-position: 2px -85px;
}

.map__checkbox:checked + .map__feature--washer {
  background-position: 2px -262px;
}

.map__feature--elevator {
  background-position: 2px -143px;
}

.map__checkbox:checked + .map__feature--elevator {
  background-position: 2px -321px;
}

.map__feature--conditioner {
  background-position: 3px -114px;
}

.map__checkbox:checked + .map__feature--conditioner {
  background-position: 2px -291px;
}

.map__feature:hover {
  -webkit-box-shadow: inset 0 0 0 1px #ffaa99;
          box-shadow: inset 0 0 0 1px #ffaa99;
}

.map__feature:focus,
.map__checkbox:focus + .map__feature {
   -webkit-box-shadow: 0 0 2px 2px #ff6547;
           box-shadow: 0 0 2px 2px #ff6547;
 }

.map__feature:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: #ff6547;
}

.map__checkbox:checked + .map__feature {
  background-color: #ff6547;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}


/**
 * Карточка объявления
 */

.map__card {
  position: absolute;
  z-index: 2;
  top: 150px;
  left: 20px;

  padding: 10px 10px 20px;
  width: 230px;

  font-size: 12px;

  border-radius: 5px;
  background-color: #ffffff;
}

.popup__avatar {
  position: absolute;
  bottom: 100%;
  left: 0;

  margin-bottom: 10px;
}

.popup__close {
  position: absolute;
  bottom: 100%;
  right: 0;

  padding: 0;

  font-size: 0;

  border: 0;
  background: none;
}

.popup__close:active {
  -webkit-transform: translate(1px, 1px);
      -ms-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
}

.popup__close:focus {
  outline: none;
  -webkit-box-shadow: 0 0 10px 3px #ff6547;
          box-shadow: 0 0 10px 3px #ff6547;
}

.popup__close::after {
  font-size: 50px;
  line-height: 40px;

  display: block;
  content: "×";

  color: #000000;
}

.popup__title {
  margin: 0;
  margin-bottom: 10px;

  font-size: 16px;
  line-height: 18px;
}

.popup__text {
  margin: 0;
  margin-bottom: 10px;
}

.popup__text--price {
  font-size: 22px;
  font-weight: 700;
}

.popup__price span {
  font-size: 16px;
}

.popup__type {
  margin: 0;
  margin-bottom: 5px;
}

.popup__text--capacity {
  margin-bottom: 0;
}

.popup__features {
  margin: 0;
  padding: 0;

  list-style: none;
}

.popup__features {
  margin-bottom: 10px;
}

.popup__feature {
  display: inline-block;
  overflow: hidden;

  width: 30px;
  height: 28px;

  font-size: 0;

  background-image: url("../img/sprite-feature.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 345px;
}

.popup__feature--wifi {
  background-position: 2px 5px;
}

.popup__feature--dishwasher {
  background-position: 2px -25px;
}

.popup__feature--parking {
  background-position: 3px -55px;
}

.popup__feature--washer {
  background-position: 2px -85px;
}

.popup__feature--elevator {
  background-position: 2px -143px;
}

.popup__feature--conditioner {
  background-position: 3px -114px;
}

.popup__photos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.popup__photo {
  margin-right: 5px;
  margin-bottom: 5px;
}

.popup__photo:hover {
  border: 2px solid #ff5635;
}


/**
 * Сообщения об успешном и неуспешном создании объявления
 */

.success,
.error {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  width: 100%;
  height: 100%;
  overflow: auto;

  padding-top: 300px;

  text-align: center;
  vertical-align: middle;

  background-color: rgba(0, 0, 0, 0.8);
}

.success__message,
.error__message {
  position: relative;

  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
}

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Кексобукинг</title>
</head>
<body>

  <main>
    <div class="promo">
      <h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
      <img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
    </div>

    <!-- Карта объявлений -->
    <section class="map map--faded">

      <!-- Метки объявлений -->
      <div class="map__pins">
        <div class="map__overlay">
          <h2 class="map__title">И снова Токио!</h2>
        </div>
        <button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
          <img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
          <svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
            <defs>
              <path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
            </defs>
            <ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
            <text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
          </svg>
        </button>
      </div>

    

标签： javascriptarrays

Answer 1

问题出在您的变量similarAds 中。您已经定义了一次并在循环中使用了相同的值。因此，简单的方法是将变量放入循环中，以便在每个新步骤中重新定义它。

'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;

var getRandomInt = function (min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};

var renderPin = function (pinData) {
  var element = document.createElement('button');
  var newImage = document.createElement('img');
  element.className = 'map__pin';
  element.style.top = pinData.location.y + 'px';
  element.style.left = pinData.location.x + 'px';
  newImage.src = pinData.author.avatar;
  newImage.alt = pinData.offer.type;
  element.appendChild(newImage);
  return element;
};

var renderPins = function () {
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < ADS_COUNT; i++) {
  let similarAds = {
  'author': {
    'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
  },
  'offer': {
    'type': TYPES[getRandomInt(0, TYPES.length - 1)],
  },

  'location': {
    'x': getRandomInt(0, mapOverlay.offsetWidth),
    'y': getRandomInt(130, 630),
  }
};
    fragment.appendChild(renderPin(similarAds));
  }
  pins.appendChild(fragment);
};

map.classList.remove('map--faded');
renderPins();

/* Общие стили. Каркас
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
      url("../fonts/Roboto-Bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
      url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
      url("../fonts/Roboto-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.content-box-component {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  -webkit-clip-path: inset(100%);

          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.hidden {
  display: none;
}

body {
  max-width: 1200px;
  margin: 0 auto;

  color: #353535;
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 16px;

  background-color: #f0f0ea;
}

fieldset {
  margin: 0;
  padding: 0;

  border: 0;
}


/* Карта с объявлениями
   ========================================================================== */

.promo {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 50%;

  width: 211px;
  height: 45px;

  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.map {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  overflow: hidden;
  height: 750px;

  background-color: #82bcc0;
  background-image: url("../img/map.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;

  border-radius: 0 0 10px 10px;
}

.map__pins {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.map__overlay {
  position: absolute;

  width: 100%;
  height: 100%;

  -webkit-transition: opacity 300ms ease-in;
  -o-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;

  opacity: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.map__title {
  width: 100%;
  margin: 0;
  padding: 0;
  margin-top: 170px;

  font-size: 85px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

.map--faded .map__overlay {
  opacity: 1;
}


/**
 * Метка объявления
 */

.map__pin {
  position: absolute;
  z-index: 1;

  width: 50px;
  height: 70px;
  margin: 0;
  padding: 0;

  border: 0;
  background: none;
}

.map__pin:focus {
  outline: none;
  -webkit-filter: drop-shadow(0 0 5px red);
          filter: drop-shadow(0 0 5px red);
}

.map__pin img {
  position: absolute;
  z-index: 1;

  top: 5px;
  left: 0;
  right: 0;
  margin: auto;

  border-radius: 50%;
}

.map__pin:not(.map__pin--main)::after {
  content: "";
  position: absolute;

  width: 50px;
  height: 70px;

  top: 0;
  left: 0;

  background-image: url("../img/pins.svg");
  background-repeat: no-repeat;
  background-position: 0 -9px;
}

.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
  background-position: 0 -88px;
}

.map__pin:active img,
.map__pin--active img {
  -webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
          box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}

.map__pin--main {
  width: 65px;
  height: 65px;

  cursor: move;
}

.map__pin--main img {
  position: relative;
  z-index: 1;

  padding: 2px 6px 6px;

  -webkit-transform: translateY(-7px);
      -ms-transform: translateY(-7px);
          transform: translateY(-7px);

  border: solid 5px #ff5635;
  border-radius: 50%;
  background-color: #ffffff;

  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.map__pin--main:active img,
.map__pin--main--active img {
  background-color: #ffffff;
}

.map__pin--main svg {
  position: absolute;
  z-index: 0;
  top: -50px;
  left: -47px;

  width: 156px;
  height: 156px;

  -webkit-transition: -webkit-transform 300ms ease-in;
  transition: -webkit-transform 300ms ease-in;
  -o-transition: transform 300ms ease-in;
  transition: transform 300ms ease-in;
  transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
  -webkit-transform: rotate(120deg) scale(0);
      -ms-transform: rotate(120deg) scale(0);
          transform: rotate(120deg) scale(0);
  -webkit-transform-origin: 78px 78px;
      -ms-transform-origin: 78px 78px;
          transform-origin: 78px 78px;
}

.map__pin--main:hover ellipse {
  fill: rgba(255, 86, 53, 0.9);
}

.map__pin--main::after {
  position: absolute;
  top: 100%;
  left: 50%;

  width: 0;
  height: 0;

  content: "";

  border: solid 5px transparent;
  border-top: solid 18px #fff;
  border-bottom: 0;

  -webkit-transition: -webkit-transform 300ms ease-in;
  transition: -webkit-transform 300ms ease-in;
  -o-transition: transform 300ms ease-in;
  transition: transform 300ms ease-in;
  transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
  -webkit-transform: translate(-50%, -6px);
      -ms-transform: translate(-50%, -6px);
          transform: translate(-50%, -6px);

  border-top-width: 22px;
  border-top-color: #ff5635;
}

.map--faded .map__pin--main svg {
  -webkit-transform: rotate(-20deg) scale(1);
      -ms-transform: rotate(-20deg) scale(1);
          transform: rotate(-20deg) scale(1);
}

.map--faded .map__pin--main::after {
  -webkit-transform: translate(-50%, -30px);
      -ms-transform: translate(-50%, -30px);
          transform: translate(-50%, -30px);
}

.map__pin--main text {
  font-size: 7px;
  font-weight: 700;

  fill: #ffffff;
}


/**
 * Фильтры объявления
 */

.map__filters-container {
  width: 100%;
  background-color: rgba(3, 28, 45, 0.5);
}

.map__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  width: 960px;
  height: 46px;
  margin: 0 auto;

  -webkit-transition: opacity 300ms ease-in;
  -o-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;

  opacity: 1;
}

.map--faded .map__filters {
  opacity: 0;
}

.map__filter {
  height: 30px;
  margin-right: 10px;

  font-size: 14px;
  vertical-align: middle;
  cursor: pointer;

  border: 1px solid transparent;
}

.map__filter:hover {
  border: 1px solid #ffaa99;
}

.map__filter:focus {
  outline: none;
  -webkit-box-shadow: 0 0 2px 2px #ff6547;
          box-shadow: 0 0 2px 2px #ff6547;
}

.map__feature {
  display: inline-block;
  overflow: hidden;

  width: 30px;
  height: 28px;

  font-size: 0;
  vertical-align: middle;
  cursor: pointer;

  background-color: #f8f8f8;
  background-image: url("../img/sprite-feature.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 345px;

  border-radius: 3px;
}

.map__feature--wifi {
  background-position: 2px 5px;
}

.map__checkbox:checked + .map__feature--wifi {
  background-position: 2px -172px;
}

.map__feature--dishwasher {
  background-position: 2px -25px;
}

.map__checkbox:checked + .map__feature--dishwasher {
  background-position: 2px -202px;
}

.map__feature--parking {
  background-position: 3px -55px;
}

.map__checkbox:checked + .map__feature--parking {
  background-position: 2px -232px;
}

.map__feature--washer {
  background-position: 2px -85px;
}

.map__checkbox:checked + .map__feature--washer {
  background-position: 2px -262px;
}

.map__feature--elevator {
  background-position: 2px -143px;
}

.map__checkbox:checked + .map__feature--elevator {
  background-position: 2px -321px;
}

.map__feature--conditioner {
  background-position: 3px -114px;
}

.map__checkbox:checked + .map__feature--conditioner {
  background-position: 2px -291px;
}

.map__feature:hover {
  -webkit-box-shadow: inset 0 0 0 1px #ffaa99;
          box-shadow: inset 0 0 0 1px #ffaa99;
}

.map__feature:focus,
.map__checkbox:focus + .map__feature {
   -webkit-box-shadow: 0 0 2px 2px #ff6547;
           box-shadow: 0 0 2px 2px #ff6547;
 }

.map__feature:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: #ff6547;
}

.map__checkbox:checked + .map__feature {
  background-color: #ff6547;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}


/**
 * Карточка объявления
 */

.map__card {
  position: absolute;
  z-index: 2;
  top: 150px;
  left: 20px;

  padding: 10px 10px 20px;
  width: 230px;

  font-size: 12px;

  border-radius: 5px;
  background-color: #ffffff;
}

.popup__avatar {
  position: absolute;
  bottom: 100%;
  left: 0;

  margin-bottom: 10px;
}

.popup__close {
  position: absolute;
  bottom: 100%;
  right: 0;

  padding: 0;

  font-size: 0;

  border: 0;
  background: none;
}

.popup__close:active {
  -webkit-transform: translate(1px, 1px);
      -ms-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
}

.popup__close:focus {
  outline: none;
  -webkit-box-shadow: 0 0 10px 3px #ff6547;
          box-shadow: 0 0 10px 3px #ff6547;
}

.popup__close::after {
  font-size: 50px;
  line-height: 40px;

  display: block;
  content: "×";

  color: #000000;
}

.popup__title {
  margin: 0;
  margin-bottom: 10px;

  font-size: 16px;
  line-height: 18px;
}

.popup__text {
  margin: 0;
  margin-bottom: 10px;
}

.popup__text--price {
  font-size: 22px;
  font-weight: 700;
}

.popup__price span {
  font-size: 16px;
}

.popup__type {
  margin: 0;
  margin-bottom: 5px;
}

.popup__text--capacity {
  margin-bottom: 0;
}

.popup__features {
  margin: 0;
  padding: 0;

  list-style: none;
}

.popup__features {
  margin-bottom: 10px;
}

.popup__feature {
  display: inline-block;
  overflow: hidden;

  width: 30px;
  height: 28px;

  font-size: 0;

  background-image: url("../img/sprite-feature.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 345px;
}

.popup__feature--wifi {
  background-position: 2px 5px;
}

.popup__feature--dishwasher {
  background-position: 2px -25px;
}

.popup__feature--parking {
  background-position: 3px -55px;
}

.popup__feature--washer {
  background-position: 2px -85px;
}

.popup__feature--elevator {
  background-position: 2px -143px;
}

.popup__feature--conditioner {
  background-position: 3px -114px;
}

.popup__photos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.popup__photo {
  margin-right: 5px;
  margin-bottom: 5px;
}

.popup__photo:hover {
  border: 2px solid #ff5635;
}


/**
 * Сообщения об успешном и неуспешном создании объявления
 */

.success,
.error {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  width: 100%;
  height: 100%;
  overflow: auto;

  padding-top: 300px;

  text-align: center;
  vertical-align: middle;

  background-color: rgba(0, 0, 0, 0.8);
}

.success__message,
.error__message {
  position: relative;

  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
}

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Кексобукинг</title>
</head>
<body>

  <main>
    <div class="promo">
      <h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
      <img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
    </div>

    <!-- Карта объявлений -->
    <section class="map map--faded">

      <!-- Метки объявлений -->
      <div class="map__pins">
        <div class="map__overlay">
          <h2 class="map__title">И снова Токио!</h2>
        </div>
        <button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
          <img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
          <svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
            <defs>
              <path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
            </defs>
            <ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
            <text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
          </svg>
        </button>
      </div>