Javascript-Google Maps-将函数移交给marker.addListener（

Question

I had this code:

 this.createMarker = function(lat, lng, string) {

 var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(lat, lng),
    visible: true,

});

marker.addListener('click', function() {

    var contentstring = string;

    var infowindow = new google.maps.InfoWindow({
        content: contentstring
    });


    infowindow.open(map, marker);
    setTimeout(function() {
        infowindow.close();
    }, 3000);


    marker.setAnimation(google.maps.Animation.BOUNCE);

    setTimeout(function() {
        marker.setAnimation(null)
    }, 1400);



});
return marker;
}

createMarker is called when an array is build out of API results.

As I was using the infowindow and the marker animation in a different location in the code as well, I decided to encapsulate it:

this.clickMarker = function(string,map,marker) {

    var contentstring = string;

    var infowindow = new google.maps.InfoWindow({
        content: contentstring
    });


    infowindow.open(map, marker);
    setTimeout(function() {
        infowindow.close();
    }, 3000);


    marker.setAnimation(google.maps.Animation.BOUNCE);

    setTimeout(function() {
        marker.setAnimation(null)
    }, 1400);
  }

Now when I try to call the function in marker.addListener

marker.addListener('click', this.clickMarker(string,map,marker));

the info windows and the marker animation load right when the map loads. The markers do not react to click after that.

I also tried this

 marker.addListener('click', function() {
 this.clickMarker(string,map,marker);
  });

But it gives me an error that clickMarker is not defined. Not sure why marker.addListener('click', this.clickMarker(string,map,marker)); does not work

Answer 1

There are some ways you can solve this:

1.- Returning a function from clickMarker .

this.clickMarker = function(string,map,marker) {
 return function() {
    var contentstring = string;

    var infowindow = new google.maps.InfoWindow({
      content: contentstring
    });


    infowindow.open(map, marker);
    setTimeout(function() {
      infowindow.close();
    }, 3000);


    marker.setAnimation(google.maps.Animation.BOUNCE);

    setTimeout(function() {
      marker.setAnimation(null)
    }, 1400);
  }
}

2.- Bind the this value to the listener.

marker.addListener('click', function() {
   this.clickMarker(string,map,marker);
}.bind(this));