无法通过RequireJS加载全部函数，调用Google API相关函数报错

兄弟，我看你这是在Magento项目里用RequireJS整合Google Maps API的时候踩坑了，uncaught exception: InvalidValueError: buildMap is not a function和TypeError: markers is undefined这俩报错我太熟了，给你一步步捋解决方案：

1. 先搞定加载顺序问题（核心原因） #

Google Maps API是异步加载的，如果你直接在<head>末尾引入它，然后用RequireJS加载自定义模块，很大概率会出现自定义模块先执行，Google API还没加载完成的情况，导致依赖的地图对象不存在，自然buildMap函数没法正确初始化。

解决办法：用Google API的callback参数触发模块加载 #

修改你在<head>里引入Google API的代码，加上callback参数指定一个全局函数，在API加载完成后再加载你的自定义RequireJS模块：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initGoogleMaps" async defer></script>

然后在全局作用域（或者一个基础脚本里）定义这个initGoogleMaps函数：

function initGoogleMaps() {
    // 此时Google Maps API已加载完成，再加载你的自定义模块
    require(['Vendor_Module/js/map-script'], function(mapModule) {
        // 把模块暴露到全局，方便phtml里调用
        window.buildMap = mapModule.buildMap;
        window.markers = mapModule.markers;
        // 如果phtml里的调用代码已经执行了，这里可以直接触发一次
        // mapModule.buildMap();
    });
}

2. 修正自定义RequireJS模块的定义 #

确保你的模块正确依赖Google Maps的全局对象（google.maps），并且正确导出函数和变量：

// app/code/Vendor/Module/view/frontend/web/js/map-script.js
define([], function() {
    // 先确认google.maps存在，避免意外报错
    if (typeof google === 'undefined' || !google.maps) {
        throw new Error('Google Maps API未加载完成');
    }

    let markers = [];

    function buildMap(mapElementId, options) {
        const map = new google.maps.Map(document.getElementById(mapElementId), options);
        // 初始化markers的逻辑
        markers = []; // 重置markers
        // ...你的地图构建逻辑
        return map;
    }

    // 导出需要的函数和变量
    return {
        buildMap: buildMap,
        markers: markers
    };
});

3. 调整phtml里的调用逻辑 #

不要直接在phtml里直接调用buildMap()，而是等模块加载完成后再调用。可以在phtml里加一个判断，或者把调用逻辑放到initGoogleMaps的回调里：

<!-- 你的phtml文件 -->
<div id="map"></div>

<script>
// 确保模块加载完成后再调用
function callBuildMap() {
    if (typeof buildMap === 'function') {
        buildMap('map', {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
        });
        // 此时markers也应该是可用的
        console.log(markers);
    } else {
        // 如果还没加载完成，延迟100ms重试
        setTimeout(callBuildMap, 100);
    }
}

// 触发调用
callBuildMap();
</script>

4. 检查Magento的布局文件配置 #

确保你的布局文件（module_index_index.xml）里正确引入了Google API，不要直接引入自定义JS（交给RequireJS加载）：

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initGoogleMaps" async defer/>
    </head>
    <body>
        <!-- 你的页面内容 -->
    </body>
</page>

最后再排查几个常见坑 #

• 确认你的Google API Key是有效的，并且启用了Maps JavaScript API
• 检查自定义JS文件的路径是否正确：app/code/Vendor/Module/view/frontend/web/js/map-script.js，Magento会自动映射到Vendor_Module/js/map-script
• 不要在模块里直接依赖google作为RequireJS模块，因为它是全局对象，没法通过RequireJS的依赖系统直接引入，用回调的方式更可靠

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