1

Jekyll の単一の投稿にマップを挿入しようとしています。

これに対する私の試みの目に見える努力は次のとおりです：github link

github のアカウント自体へのリンクは次のとおりです: link

デフォルトのテンプレート、つまり Hyde を使用しました。

次に、リーフレットの CSS および JS ファイルを _includes/head.html に追加しました。

次に、_layouts/default.html に依存する投稿を作成しました (デフォルトは head.html から描画されます)。

先ほど言ったように、1 つの投稿に 1 つのマップを挿入しようとしています。最初のリンクを見ると、ブログ全体に変な形で地図が表示されています。

単一の投稿自体には表示されません。

どうすればこれを機能させることができますか？

可能であれば、最終的にはそれぞれ独自のマップを含む一連の投稿を作成したいと考えています。

これまでに私が持っている孤独な投稿のコードは次のとおりです。

---
layout: default
title: Trying to integrate map in jekyll
---
<div id="map">

</div>

<script>
        var map = L.map('map').setView([34.00000, -118.260126], 14); 

        mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; ' + mapLink, maxZoom: 18, }).addTo(map);


        var marker = L.marker([34.063298, -118.260126]) .addTo(map).bindPopup("<b>Blah Blah Blah</b><br /><a href='http://www.cnn.com'>Additional Information</a><br />").openPopup();


</script>

この投稿はリンクに大きく依存していることに気づきました。しかし、私の問題を説明する他の方法はありません。

4

1 に答える 1

3

の正しいコード_includes/head.htmlは次のとおりです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">

いいえ

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"></script>

と

<style type="text/css">
  #map {
    width:400px;
    height:550px;
    background-color: red;
  }
</style>

いいえ

<style type="text/css">
  #map {
    width:400px%;
    height:550px;
    background-color: red;
  }
</style>
于 2014-12-28T22:57:19.917 に答える