событие onclick с объектом в качестве параметра в кавычках - PullRequest
Новая
       20

событие onclick с объектом в качестве параметра в кавычках

0 голосов
/ 05 июля 2018

Работая с API карт и мест Google, я отображаю информационные окна для каждого маркера, который генерируется функцией generateInfoWindow (location) .

Там я создаю строку HTML , которая будет передана в атрибут содержимого маркеров карт Google.

Функция 

function generateInfoWindow(location) {
  var html = "<div class = 'infowindowContainer'>" +
    "<span class = 'infoWindowHeader'>" + location.name + "</span>" +
    "<div class = 'row'>" +
    "<span class = 'col-xs-12'> ... : " + getInfoWindowDetails(location).adress + "</span>" +
    "<span class = 'col-xs-12'> ... : " + getInfoWindowDetails(location).open_hours + "</span>";

  if (location.offers.length > 0) {
    html +=
      "<span class = 'col-xs-12 iwOffers'> ... </span>" +
      "</div>" + //ends row
      "<div class = 'infoWindowCircleContainer'>";
    for (var i = 0; i < location.offers.length; i++) {
      html += "<span class = 'infoWindowCircle'>" + location.offers[i].offer_text + "</span>";
    }
    html += "</div>" //CircleContainer
  }

  html += "<span class = 'showMore' onclick = 'processWin(" + location + ")'>Show more</span>";
  html += "</div>"; //InfoWindowContainer the parent to all

  return html;
}

function processWin(location) {
  var winMarker;
  var winnerMap;
  var mapOptions = {
    zoom: 15,
    center: location.geometry.location,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: googleMapsStyles
  };

  var locationId = location.place_id;
  var request = {
    placeId: locationId
  };

  places.getDetails(request, getWinnerDetails); //Where getWinnerDetails is the callback

  //since the location that we are passing in the callback function is the one we get as a JSON from the detailed search we are going to have to use our modified vars associated with the location here such as .keyword
  $("#foodType").text("Typ av mat : " + location.keyword);
  winnerMap = new google.maps.Map(document.getElementById('displayWinnerMap'), mapOptions);

  for (var i = 0; i < markers.length; i++) {
    if (markers[i].placeId == location.place_id) {
      winMarker = markers[i];
      break;
    }
  }

  //setOfferCircles(location);
  winMarker.setMap(winnerMap);
  $("#displayWinPage").css("display", "block");
  doScroll("#displayWinPage");
}

Когда я добавляю диапазон с классом showMore, я хочу добавить событие onclick, которое вызовет метод processWin (location) , где я передаю переменную location. (Будет несколько маркеров).

Мне не удается передать местоположение объекта в событии onclick и Я не понимаю почему. Пожалуйста, просветите меня.

1 Ответ

0 голосов
/ 02 июля 2019

Объект, преобразованный в строку, становится [объектным объектом], и это то, что вы передаете в качестве параметра, а не сам объект. Вот пример кода, показывающий неправильный вывод 

var location = {x : 100, y : 100};
var html = "<span class = 'showMore' onclick = 'processWin(" + location + ")'>Show more</span>";
console.log(html);

Output: <span class = 'showMore' onclick = 'processWin([object Object])'>Show more</span>

Используя JSON.stringify (location), вы получите корректный вывод объекта, как показано ниже. 

var location = {x : 100, y : 100};

var html = "<span class = 'showMore' onclick = 'processWin(" + JSON.stringify(location) + ")'>Show more</span>";

console.log(html);
Output:<span class = 'showMore' onclick = 'processWin({"x":100,"y":100})'>Show more</span>
...