web-dev-qa-db-ja.com

WordPressにOpenStreetMapを統合する

私はWordPressページに地図を（OpenStreetMapとOpenLayersを使って）置きたいです。私はプラグインを使いたくありません、なぜなら私は私が私がしなければならないいくつかの特定の操作をしたいと思うので、そして私ができる限り最も柔軟にしたいです。私はこのチュートリアルに従った： http://wiki.openstreetmap.org/wiki/Wordpress#Manually_embedding_osm_maps

ただし、ページ上では何も起こらず、空白で表示されます（私が使用するテーマに沿ったページの名前のみ（14、古典的、テストに最適））。コードは地元のWebサイトで機能します。

これが私のスクリプトです（map_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);

これは、変更が必要なheader.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>

私の問題はheader.phpファイルで指定したパスが原因だと思います。実際、JavaScriptファイルはプラグインに含まれており、プラグインは有効になっています。私は自分のパスを指定するためにwp-content/themes/14ディレクトリから始めました、なぜならheader.phpがそこにあるからですが、多分私は間違っていました。

誰かが私の問題とそれを解決する方法についての考えを持っていますか？ありがとうございます。

postspagesjavascript
1
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ファイルに、私は2つのスクリプトを入れて、それらのうちの1つがページオープンを捕らえるのでそれはうまくいきます。

  • 私のスクリプトが宣言されている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');
0
Reyedy