javascript 带参数的函数在页面加载时调用

Question

for(i = 0; i < locations.length; i++) {
  currentLocation = locations[i];

  var mapMarker = new google.maps.Marker ({
    position: locations[i][0],
    map: map,
    label: labels[i],
    title: locations[i][1],
    zoom: 18
  })

  mapMarkers.push(mapMarker);
  mapMarkers[i].addListener('click', markerClick(currentLocation)); 
}


function markerClick(location) {
  console.log("you clicked " + location)
}

每次添加到元素时都会调用函数 markerClick。我怎样才能让它只在单击元素时调用？我在另一个答案 here 中读到，省略 () 可以解决这个问题，但我需要传递一个参数，但我不确定该怎么做。感谢您的帮助

Answer 1

添加侦听器时，您是在调用 markerClick() 函数，而不是将其作为变量传递。修复方法如下：

//using a separate function like this avoids some nasty 
//problems with callbacks and closures in for loops
function addMapMarkerClickListener( mapMarker, location ) {
 
   //we use an anonymous function as the listener
   mapMarker.addListener('click', function() {
      markerClick( location );
   });
}

for(i = 0; i < locations.length; i++) {
  currentLocation = locations[i];

  var mapMarker = new google.maps.Marker ({
    position: locations[i][0],
    map: map,
    label: labels[i],
    title: locations[i][1],
    zoom: 18
  })

  mapMarkers.push(mapMarker);

  addMapMarkerClickListener( mapMarkers[i], currentLocation );
}


function markerClick(location) {
  console.log("you clicked " + location)
}

Answer 2

一个选项是将您的 markerClick 函数转换为 return 函数。

function markerClick(location) {
  return function(evt) {
    console.log("you clicked " + JSON.stringify(location));
  }
}

proof of concept fiddle

代码片段：

var locations = [
  [{lat: 42,  lng: -72}, "Here"],
  [{lat: 42.1,lng: -72.1}, "There"]
];
var mapMarkers = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(42, -72),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (i = 0; i < locations.length; i++) {
    currentLocation = locations[i];

    var mapMarker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      // label: labels[i],
      title: locations[i][1],
      zoom: 18
    })

    mapMarkers.push(mapMarker);
    mapMarkers[i].addListener('click', markerClick(currentLocation));
  }
}

function markerClick(location) {
  return function(evt) {
    console.log("you clicked " + JSON.stringify(location));
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

javascript 带参数的函数在页面加载时调用

javascript function that takes parameter is called on page load

javascript

parameters

google-maps

function

google-maps-markers