如何在jekyll中的单个帖子中显示传单地图? [英] How to display a leaflet map in a single post in jekyll?

问题描述

我正在尝试在Jekyll的单个帖子中插入地图.

I'm trying to insert a map in a single post in Jekyll.

这是我对此的明显尝试: github链接

Here is the visible effort of my attempt to this: github link

以下是指向github帐户本身的链接:链接

Here is the link to the github's account itself: link

我使用了默认模板，即Hyde.

I took a default template, ie Hyde.

然后，我在_includes/head.html

Then I added the Leaflet's CSS and JS files in the _includes/head.html

然后我创建了一个文章，该文章依赖于_layouts/default.html(默认绘制自head.html)

Then I created a post that relied on the _layouts/default.html (default draws from head.html)

正如我所说，我正在尝试在单个帖子中插入单个地图.如果您查看第一个链接，它将以一种奇怪的方式显示整个博客的地图.

As I said, I'm attempting to insert a single map in a single post. If you look at the first link, it shows the map all over the blog in a weird manner.

它没有显示在单个帖子本身中.

It doesn't show up in the single post itself.

我该如何进行这项工作?

How can I make this work?

如果可能的话，我希望最终能有一系列贴子，每个贴子都有自己的地图.

I'm hoping to eventually have a series of posts each with their own map, if that's possible.

这是我到目前为止撰写的单独帖子中的代码:

Here is the code in the solitary post that I have up so far:

---
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>

我意识到这篇文章在很大程度上依赖于链接，因此SO在这里对此皱眉.但是我没有其他方法可以解释我的问题.

I realize that this post relies a lot on links, and that's frowned up on here at SO. But I have no other way of explaining my problem.

推荐答案

_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>

这篇关于如何在jekyll中的单个帖子中显示传单地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！