javascript - 当我使用传单工具显示到 wordpress 的 map 时出现错误(未捕获错误 : Map container not found)

Question

我正在尝试插入传单 javascript 以显示来自 mapserver 的 map ，我尝试了以下代码但出现了此错误:

Uncaught Error: Map container not found.
    at e._initContainer (leaflet.js?ver=1:6)
    at e.initialize (leaflet.js?ver=1:6)
    at new e (leaflet.js?ver=1:6)
    at Object.o.map (leaflet.js?ver=1:6)
    at script1.js?ver=1:3

我确实搜索了一些教程，但没有找到适用于 wordpress 的内容，所以我不知道该怎么做才能解决这个问题。 这是我用来在 functions.php 中插入 js 和 css 传单文件的代码:

function add_js_scripts() {
wp_enqueue_script('script-leaflet-js', 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js',array() ,true);
wp_enqueue_style( 'script-leaflet-css','http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css',array(),true);
wp_enqueue_script( 'script-leaflet-map', get_template_directory_uri().'/script1.js', array(), true );}
add_action('wp_enqueue_scripts', 'add_js_scripts');

脚本1.js:

        var map = L.map('mapid').setView([29, -6.8644], 5); 
L.tileLayer.wms("http://localhost:81/cgi-bin/mapserv.exe?map=/wamp64/www/wordpress/map1.map", {
            layers: 'map1',
            format: 'image/png',
            transparent: true,
            attribution: "Dan's Amazing Roads",
            maxZoom: 18,
            minZoom: 12,
        }).addTo(mapid);

这是我在页面中插入的代码:

<div id="mapid" style="width: 600px; height: 500px;"></div>

谢谢!

Answer 1

尝试在 DOM 就绪时加载

由于 wp_enqueue_script() 的 $in_footer 参数为真。 它在 wp_footer() 操作中排入队列，通常就在 body 标记结束之前，最后读取，然后在 dom 准备就绪时调用。

文档:wp_enqueue_script

(function()
{
   var map = L.map('mapid').setView([29, -6.8644], 5); 
   L.tileLayer.wms("htt....
})();

另一种方法，所有浏览器(旧的IE除外...)

document.addEventListener('DOMContentLoaded', function()
{
   var map = L.map('mapid').setView([29, -6.8644], 5); 
   L.tileLayer.wms("htt....

}, false);