将对象作为引号中的参数的 onClick 事件

Question

使用谷歌地图和地点API，我正在为由函数生成的每个标记渲染信息窗口(位置(。

在那里，我创建了一个字符串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");
}

在我用类显示附加跨度的地方，我希望附加一个 onclick 事件，该事件将调用我在其中传递位置变量的方法processWin(location(。(将是多个标记(。

我似乎无法在onclick事件中传递对象位置，并且 我不明白为什么。请开导我。

Answer 1

转换为字符串的对象将成为 [对象对象]，这就是您作为参数传递的内容，而不是对象本身。下面是显示错误输出的示例代码

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>