如何向Google Maps nearbySearch方法的回调函数传入额外自定义参数

问题原因 #

google.maps.places.PlacesService的nearbySearch方法仅会给第二个参数（回调函数）传递results和status两个原生返回值，你额外传入的第三个参数不会被底层方法处理，所以原写法无法生效。

解决方案 #

方案1：匿名回调包装（最常用）

用匿名函数作为中间层回调，在内部调用你的自定义方法并传入额外参数，逻辑直观无额外学习成本，适配绝大多数场景：

function loadMapService() {
  const service = new google.maps.places.PlacesService(map);
  // 你需要传入的自定义参数
  const somethingElse = "自定义参数值";

  // 匿名函数接收原生返回的两个参数，再透传给你的自定义callback并追加额外参数
  service.nearbySearch(request, (results, status) => {
    callback(results, status, somethingElse);
  });
}

function callback(results, status, newArgument) {
  // 此处可正常获取到传入的newArgument值
  console.log(newArgument);
}

方案2：用bind方法预绑定参数

如果需要同时绑定回调的this指向，可使用Function.prototype.bind预传入额外参数，注意绑定的参数会排在原生返回参数之前，需要调整callback的参数顺序：

function loadMapService() {
  const service = new google.maps.places.PlacesService(map);
  const somethingElse = "自定义参数值";

  // bind第一个参数为回调内的this指向，后续参数为预绑定的入参
  service.nearbySearch(request, callback.bind(this, somethingElse));
}

// 预绑定的参数在前，原生返回的results、status在后
function callback(newArgument, results, status) {
  console.log(newArgument);
}

方案3：高阶函数封装（适合复用场景）

如果多处需要调用带自定义参数的该回调，可把callback封装为高阶函数，提前接收自定义参数后返回真正的回调方法：

function loadMapService() {
  const service = new google.maps.places.PlacesService(map);
  const somethingElse = "自定义参数值";

  // 传入自定义参数得到符合nearbySearch要求的回调函数
  service.nearbySearch(request, callback(somethingElse));
}

// 高阶函数：先接收自定义参数，返回实际执行的回调
function callback(newArgument) {
  return function(results, status) {
    // 内部闭包可直接访问外层传入的newArgument
    console.log(newArgument);
  }
}

内容的提问来源于stack exchange，提问作者xineta5158