[英]How to display a leaflet map in a single post in jekyll?
I'm trying to insert a map in a single post in Jekyll. 我正试图在Jekyll的一个帖子中插入一张地图。
Here is the visible effort of my attempt to this: github link 以下是我尝试此操作的可见努力: github链接
Here is the link to the github's account itself: link 这是github帐户本身的链接 : 链接
I took a default template, ie Hyde. 我采用了默认模板,即海德。
Then I added the Leaflet's CSS and JS files in the _includes/head.html 然后我在_includes / head.html中添加了Leaflet的CSS和JS文件
Then I created a post that relied on the _layouts/default.html (default draws from head.html) 然后我创建了一个依赖于_layouts / default.html的帖子(默认从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 © ' + 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>
I realize that this post relies a lot on links, and that's frowned up on here at SO. 我意识到这个帖子很依赖于链接,而且这在SO上也不屑一顾。 But I have no other way of explaining my problem. 但我无法解释我的问题。
Correct code in _includes/head.html
is : _includes/head.html
正确代码是:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
not 不
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"></script>
and 和
<style type="text/css">
#map {
width:400px;
height:550px;
background-color: red;
}
</style>
not 不
<style type="text/css">
#map {
width:400px%;
height:550px;
background-color: red;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.