全局范围内的 Javascript 函数

Question

我正在尝试在 wordpress 网站上加载 google maps js api，但我不断收到“initMap 不是函数”错误。我想我可能写错了我的代码，我从一个独立的页面改编它，所以也许将它用于 wordpress 搞砸了。我遇到了 JS 文件未按正确顺序加载的问题，但现在我的 JS 在 Google Maps 之前加载，所以这不是问题。一定是initMap函数有问题。这是导致错误的函数。我以为我已经将它传递给了全局范围，但我不确定我是否正确地做到了。

API 键调用

wp_enqueue_script( 'google-maps-js', 'https://maps.googleapis.com/maps/api/js?v=3&key=###key###&callback=initMap', array(), '20151215', true );

js文件中的函数

jQuery(function($) {
    window.initMap = function() {

        // Disallow drag on mobile
        var isDraggable = $(document).width() > 480 ? true : false;

      map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: false,
        draggable: isDraggable,
        streetViewControl: false,
        styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
      });

      // Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
      map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))
    };
});

Answer 1

尝试将你的 initMap 函数移到 jquery init 之外

<script>
    function initMap() {

        // Disallow drag on mobile
        var isDraggable = $(document).width() > 480 ? true : false;

      map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: false,
        draggable: isDraggable,
        streetViewControl: false,
        styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
      });

      // Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
      map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))
    };

</script>