Question

我有这个功能：

function createMarkersForPlaces(places, infowindow) {
  for (var i = 0; i < places.length; i++) {
    var place = places[i];
    var marker = new google.maps.Marker({
      map: map,
      title: place.name,
      position: place.geometry.location,
      id: place.place_id,
      animation: google.maps.Animation.DROP
    });
    placeMarkers.push(marker);
    // if user clicks one of the marker, execute getPlaceDetails
    // for that specific place
    marker.addListener('click', function() {
      if (infowindow.marker == this) {
      } else {
        getPlacesDetails(this, infowindow);
      }
    });
    // based on the places above, populate list in html
    $("ul").append("<li><a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'>" + place.name + "</a></li>");
  }
}

但这行代码不起作用。

$("ul").append("<li><a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'>" + place.name + "</a></li>");

在定义了marker和infowindow的函数内部，除了这行代码之外，该函数工作正常。 Marker是来自google.maps.marker的对象，infowindow是来自google.maps.InfoWindow的对象。我怎样才能使它发挥作用？

function getPlacesDetails(marker, infowindow) {some function...}

Answer 1

首先，你的串联是错误的。您需要通过终止字符串，连接变量然后添加另一个字符串将变量连接到字符串中。不要忘记每个连接之间的+：

onclick='getPlacesDetails("' + marker + '","' + infowindow + '")'

其次，所有这一切都将整个对象连接到你的字符串中，而不是该对象的一些实际可用的字符串属性。

现在，您不应该使用内联HTML事件属性来进行事件绑定。这就是我们100年前做过的事情， many reasons 没有这样做。相反，在脚本中执行所有事件绑定。这也可以让你完全避免连接。

最后，如果您实际上没有在任何地方导航，请不要使用超链接。它在语义上是不正确的，您必须禁用链接的本机点击行为，更不用说它可能会导致浏览器的历史记录出现问题。几乎任何可见元素都可以点击，所以只需将click绑定到li并完全忘记a：

var li = document.createElement("li");    // Create the element in memory
li.classList.add("w3-bar-item");          // Configure the CSS

// Set up the click event to an anonymous function that calls the
// actual function you want and passes the parameters it needs:
li.addEventListener("click", function(){ 
   getPlacesDetails(marker, infowindow)
});

Answer 2

marker是一个对象，因此您将无法将其转换为要放入onclick属性的字符串，并且它在窗口范围之外，因此您不会能够直接在onclick属性中直接执行此操作。我可能会这样做：

var $li = $("<li><a href='#' class='w3-bar-item'>" + place.name + "</a></li>");
$("ul").append($li);
$li.on('click', getPlacesDetails.bind(this, marker, infowindow));

如何在onclick（）事件中传递参数中的对象？

2 个答案: