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

Question

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

//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也是如此(

关于为什么会发生这些事情，有什么线索吗？我更希望只有一个async defer函数，也只需要一个传递了参数的initMap函数，但为了有两个不同的映射，我找不到这样做的方法(initMap是由谷歌地图字符串调用的，据我所知，没有参数可以传递到那里，根据页面设置缩放听起来像是一种方法，但如何将在我的自定义主题选项页面上设置的缩放设置正确地输入initMap函数？(

Answer 1

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

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

因此，只在所需的特定页面上加载谷歌地图脚本，在试图将两个地图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);

为了完整起见，以下是我在scripts.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'
});
}

我确信它不是最优的，我可以将它重构为一个带有变量的函数，但在这之前，我知道这是可行的。