如何向谷歌地图的add_async_defer函数添加两个条件？

Question

谷歌地图所需的 add_sync_defer 函数通常如下所示：

//For Google Maps API
    function add_async_defer($tag, $handle) {
    if('googlemaps' !== $handle) {
        return $tag;
    }
    return str_replace(' src', 'async="async" defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'add_async_defer', 10, 2);

然而，我试图在我的 WordPress 网站上运行两个谷歌地图（两个不同的缩放级别，两个不同的页面），让它工作起来很痛苦，但有时它会起作用。 我无法让它与任何包含两个条件的条件语句一起使用，如下所示：

//For Google Maps API
function add_async_defer($tag, $handle) {
    if(('googlemaps1' !== $handle) || ('googlemaps2' !== $handle)) {
        return $tag;
    }
    return str_replace(' src', 'async="async" defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'add_async_defer', 10, 2);

这导致地图应该在的地方出现空白。 然后我尝试使用两个函数，每个地图一个，但这会导致很多时候出现空白或地图正常加载。 类似于以下内容：

//For Google Maps API
function add_async_defer1($tag, $handle) {
    if('googlemaps1' !== $handle) {
        return $tag;
    }
    return str_replace(' src', 'async="async" defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'add_async_defer1', 10, 2);

（与 add_async_defer2 相同）

有任何关于为什么会发生这些事情的指示吗？ 我宁愿只有一个异步延迟函数，也只有一个传入参数的 initMap 函数，但我找不到一种方法来做到这一点，以便拥有两个不同的地图（initMap 由 googlemaps 字符串调用，没有据我所知，参数可以传递到那里，根据页面设置缩放听起来像是可行的方法，但如何将自定义主题选项页面上设置的缩放设置正确地传递到 initMap 函数中？）

Answer 1

我通过在functions.php文件中添加if语句解决了我的问题-

if ( is_page('contact')) { wp_register_script('googlemaps1'...etc) }
if ( is_page('about')) { wp_register_script('googlemaps2'...etc) }

因此仅在所需的特定页面上加载 googlemaps 脚本，因为它试图将两个地图 API 加载到每个页面，所以肯定存在冲突。 现在，控制台日志中的所有错误都已清除，每次刷新页面或清除缓存时，地图似乎都会加载。

我还在 wp_enqueue 行周围添加了 if 语句：

if ( is_page('contact')) {
        wp_enqueue_script('googlemaps1');
    }

    if ( is_page('about')) {
        wp_enqueue_script('googlemaps2');
    }

add_async_defer 函数中 if 语句中的两个条件现在可以按预期工作：

function add_async_defer($tag, $handle) {
    if(('googlemaps1' !== $handle) && ('googlemaps2' !== $handle)) {
        return $tag;
    }
    return str_replace(' src', 'async="async" defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'add_async_defer', 10, 2);

为了完整起见，以下是我的 script.js 中的地图内容：

//Google Map Init 1
var map1;

function initMap1() {

  var latlng = {
    lat: parseFloat( options.latitude ),
    lng: parseFloat( options.longitude )
  }

  map1 = new google.maps.Map(document.getElementById("map1"), {
    center: latlng,
    zoom: parseInt( options.zoom1 ),
  });

  var marker = new google.maps.Marker({
    position: latlng,
    map: map1,
    title: 'Here I am'
  });
}

//Google Map Init 2
var map2;

function initMap2() {

  var latlng = {
    lat: parseFloat( options.latitude ),
    lng: parseFloat( options.longitude )
  }

  map2 = new google.maps.Map(document.getElementById("map2"), {
    center: latlng,
    zoom: parseInt( options.zoom2 ),
  });

  var marker = new google.maps.Marker({
    position: latlng,
    map: map2,
    title: 'Here I am'
  });
}

我确信它不是最佳的，我也许可以将其重构为带有变量的单个函数，但在此之前我知道这是可行的。