首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >问题- initMap()

问题- initMap()
EN

WordPress Development用户
提问于 2018-12-07 13:37:23
回答 1查看 5.5K关注 0票数 1

我做自定义wordpress寺庙网站与谷歌地图脚本,和php代码。我有问题加载它,他们不总是工作,有时我必须刷新网站十次,直到它开始工作。

如果它们不起作用,我就会出错。

"initMap is not a function"

我的寺庙网站的Code:

代码语言:javascript
运行
复制
    #colophon{
        display: none;
    }
    .page-template {
        background-color: black!important;
    }
    .gm-style-iw {
        height: 165px!important;
        width: 300px!important;
    }



    
    
        
            Wielki format
            Citylight
            Backlight
        
    


 'product');
    $loop = new WP_Query( $args );

    foreach ($loop->posts as $post){
        $storeData[] = [
            'title' => apply_filters('the_title', $post->post_title),
            'url' => get_permalink(),
            'num'   => get_field('numer_katalogowy'),
            'lat'   => get_field('gps_dlugosc'),
            'long'  => get_field('szerokosc_gps'),
            'surface'  => get_field('powierzchnia'),
            'height'  => get_field('dlugosc'),
            'width'  => get_field('szerokosc'),
            'light'  => get_field('oswietlenie'),
        ];
    }
    wp_localize_script('my-map-script', 'storeData', $storeData);
?>

js文件的Code:

代码语言:javascript
运行
复制
function initMap() {
  // The location of Uluru
    var poznan = {lat: 52.402684, lng: 16.9213905};
    var j = storeData.length;
    var infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    var marker, i;

    var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: poznan,
      }
    );

    for (i = 0; i < j; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(storeData[i].lat, storeData[i].long),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(
                    '' +
                        '' + storeData[i].title + '' +
                        '' + storeData[i].num + '' +
                        '' + 'Wysokość: ' + storeData[i].height + ' m'+ '' +
                        '' + 'Szerokość: ' + storeData[i].width + ' m'+ '' +
                        '' + 'Powierzchnia: ' + storeData[i].surface + ' m2'+ '' +
                        '' + 'Oświetlenie: ' + storeData[i].light + '' +
                        '' + 'Przejdź do powierzchni' + '' +
                    ''


                );
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}

我认为这个问题可以按脚本顺序处理,但我不知道如何解决。有问题的工地入口:

我的网站

EN

回答 1

WordPress Development用户

回答已采纳

发布于 2018-12-07 13:54:43

Google脚本URL的这一部分是罪魁祸首:

代码语言:javascript
运行
复制
&callback=initMap

这意味着,当加载脚本时,它将尝试运行initMap()函数,但在页中部输出的Google </code>标记之后,您将在页脚中包含函数的脚本排队。这意味着在Google尝试运行<code>initMap()</code>之前不会加载脚本。</div><div>您应该使用<code>wp_enqueue_script()</code>对Google脚本进行排队,并将您的自定义脚本作为依赖项,以确保它们以正确的顺序加载。</div><div>因此,删除<code><script></code>标记并添加:</div><pre><code>wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap', [ 'my-map-script' ], null, true );</code></pre><div>这将确保Google脚本将在脚本之后加载,从而确保<code>initMap()</code>函数可用。</div>

票数 2
EN
页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://wordpress.stackexchange.com/questions/321288

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档