找到一种通过Google Maps API通过回调传递信息的好方法

时间:2017-10-06 06:35:36

标签: javascript google-maps asynchronous google-maps-api-3 callback

我有一些代码可以异步调用Google地图:

var directionsService = new google.maps.DirectionsService;
directionsService.route(arg1, callback);
directionsService.route(arg2, callback);
directionsService.route(arg3, callback);

function callback(response, status) {
  // complex function here
}

现在每个回调都会生成一个存储在全局变量中的数据。设计有所增长,现在我想在每个回调中包含一个参数。但我无法直接这样做,因为我无法控制directionsService.route。这也让我觉得这已经是处理这个问题的迂回方式了;我更倾向于将arg1, arg2, arg3及其参数传递给一个函数,该函数可以处理异步内容并在所有内容都返回时进行清理。关于什么是最好的方法的任何建议?

我可以通过添加另一个全局并在调用之间更新它来深入挖掘我的洞。我可以为directionsService.route编写一个包装器,它将它包装在另一层回调间接中。我可以尝试将回调格式强制转换为像async这样的库所需的匹配。我可以写几个版本的回调函数,或用函数发生器替换它。这些选项是否合理?还有更好的东西吗?

老实说,这是一个小项目,我不需要能够很好地扩展的东西,但为了我自己的安心,我想要一些不可思议且有点干的东西。

1 个答案:

答案 0 :(得分:1)

我写了一个简单的代码,用回调函数调度一个事件。当事件发出时,你只需eventListener,你想要什么参数,你可以称之为大功能。

这是我的代码:

var directionsService = new google.maps.DirectionsService;

// Listen for the event.
var aParameter = 35;
window.addEventListener('build', function (e) { console.log("OK EVENT. With a prameter: " + aParameter); /* Now, call a function with parameters:*/ aFunction (aParameter); }, false);

directionsService.route(arg1, callback);

function callback() {
  console.log("OK CALLBACK.");
  var event = new Event('build');
  // Dispatch the event.
  window.dispatchEvent(event);
}

function aFunction (parameter) {
  console.log (parameter);
} 

您还可以使用以下参数调度事件:

var event = new CustomEvent('build', { detail: elem.dataset.time });

function eventHandler(e) {
  console.log('The time is: ' + e.detail);
}

咨询有关活动的MDN page

如果您有任何疑问,请告诉我。