在WordPress上集成OpenStreetMap

时间:2016-06-06 作者:Reyedy

我想在WordPress页面上放置一张地图(使用OpenStreetMap和OpenLayers)。我不想使用插件,因为我想对地图进行一些特定的操作,因此我想保持尽可能的灵活性。我遵循了本教程:http://wiki.openstreetmap.org/wiki/Wordpress#Manually_embedding_osm_maps

然而,页面上什么也没有发生,它看起来是空的(只有页面的名称,以我使用的主题(Twenty14,一个经典,非常适合测试)为形状)。该代码在本地网站上运行。

下面是我的脚本(包含在map\\u test.js中):

map = new OpenLayers.Map(\'basicMap\');

var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326");
// Transform from WGS 1984
var toProjection   = new OpenLayers.Projection("EPSG:900913");
// to Spherical Mercator Projection
var centerPosition = new OpenLayers.LonLat(-85.00,38.00).transform( fromProjection, toProjection);
var zoom = 5;

map.addLayer(mapnik);
map.setCenter(centerPosition, zoom);
这是标题。必须修改的php代码:

<head>
    [...]
    <script src="../../plugins/Fidu-interactive-map/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script type="text/javascript" src="../../plugins/Fidu-interactive-map/js/map_test.js"></script>
    <?php wp_head(); ?>
</head>
WordPress页面为空,仅包含以下代码:

<div id="basicMap"><p>OSM map</p></div>
我想我的问题可能是因为我在标题中指定的路径。php文件。实际上,JavaScript文件包含在一个插件中,该插件被激活。我从wp-content/themes/twentyretven目录开始指定我的路径,因为标题。php是存在的,但也许我错了。

有人知道我的问题以及如何解决吗?谢谢

1 个回复
最合适的回答,由SO网友:Reyedy 整理而成

好了,我终于成功了,我的地图现在显示出来了,多亏了你们。我所做的是:

我将脚本的路径更改为绝对路径。实际上,使用相对URL是个坏主意

document.addEventListener("DOMContentLoaded", function()
{
    map_init();
}, false);

var map;

function map_init(){
    map = new OpenLayers.Map(\'basicMap\');

    var mapnik = new OpenLayers.Layer.OSM();
    var fromProjection = new OpenLayers.Projection("EPSG:4326");
    // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913");
    // to Spherical Mercator Projection
    var centerPosition = new OpenLayers.LonLat(-85.00,38.00).transform( fromProjection, toProjection);
    var zoom = 5;

    map.addLayer(mapnik);
    map.setCenter(centerPosition, zoom);
}
我删除了我在标题中声明的,因为它现在没用了。事实上,在我插件的php文件中,我放置了两个脚本,它可以正常工作,因为其中一个脚本捕捉到了页面的打开。

现在,我调用php文件,在该文件中,我的脚本是通过在页面上使用一个短代码来声明的。

然而,我尝试将脚本排队并从php页面中删除,但没有成功。我对这项技术不熟悉,还有什么需要我做的吗?下面是一段代码:

function add_scripts(){
    wp_register_script(\'map_init\', \'/wp-content/plugins/Fidu-interactive-map/js/map_init.js\');
    wp_register_script(\'OpenLayers\', \'/wp-content/plugins/Fidu-interactive-map/OpenLayers-2.13.1/OpenLayers.js\');
    wp_enqueue_script(\'map_init\');
    wp_enqueue_script(\'OpenLayers\');
}
add_action(\'wp_enqueue_scripts\', \'add_scripts\');

相关推荐

Changing slug of all posts

我有一个网站,有十几种自定义帖子类型。我想更改默认的帖子类型,使其URL有一段/news/。在我的函数文件中,我有: add_action( \'init\', \'change_post_object\' ); // Change dashboard Posts to News function change_post_object() { $get_post_type = get_post_type_object(\'post\');&#x