Question

我正在基于a blog post为Jekyll构建网页地图布局，尽管我使用的是Leaflet.js而不是Mapbox.js。

在帖子的前面，标记被定义为数组列表。格式如下：

[ "lng, lat", "Popup Content", "Font-awesome Icon", "Color of Marker"]

两个标记可能如下所示：

markers: - ["-84.312, 33.845", "Regional Office", "home", "red"] - ["-84.393, 33.753", "Federal Building", "building", "blue"]

我从标记中选取选项并将它们作为属性添加到GeoJSON表示中。为了使用Leaflet.awesome-markers，每个项目必须表示为标记层而不是GeoJSON层。幸运的是，GeoJSON Layer为convert each point to a Marker Layer提供了一种方法。

似乎即使我可以访问该功能（以及功能属性），我也无法获得要评估的变量feature.properties.icon。在Jekyll工作之后它产生了魔力并生成静态HTML文件，我看到icon属性仍然设置为“feature.properties.icon”而不是该变量的值。

在这种情况下，

console.log(feature.properties.icon)按预期评估为"home"。

发布前置事项：

---
title: "This is an Example of a Map-Centric Post"
layout: post
tags:
 - Map

map: leaflet
center: "33.733784, -84.389369"
zoom: 9
map-background: terrain
markers: # [ Coordinates, Popup Content, Font-Awesome Icon, Color]
 - ["-84.312, 33.845", "Office", "home", "red"]
 - ["-84.393, 33.753", "Federal Building", "building", "blue"]

---

leaflet.html包含：

<script>
var toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 20
}),
terrain = L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    minZoom: 4,
    maxZoom: 18
}),
map = L.map('map', {
    layers: [{{page.map-background}}]
}).setView([ {{page.center}} ], {{page.zoom}} );

map.touchZoom.disable();
map.scrollWheelZoom.disable();
if (map.tap) map.tap.disable();

{% if page.markers %}
    var markers = [{
        "type":"FeatureCollection",
        "features":[
            {% for marker in page.markers %}
                {
                    "type":"Feature",
                    "properties":{
                        "popup": "{{marker[1]}}",
                        "icon": "{{marker[2]}}",
                        "color": "{{marker[3]}}"
                    },
                    "geometry":{
                        "type":"Point",
                        "coordinates":[ {{ marker[0] }} ]
                    }
                }{% if forloop.last == false %},{% endif %}
            {% endfor %}
        ]
    }];

L.geoJson(markers, {
    pointToLayer: function (feature, latlng) {
        console.log(feature.properties.icon) // This works!
        var mapMarker = L.AwesomeMarkers.icon({
            icon: feature.properties.icon, // This doesn't work
            prefix: 'fa',
            markerColor: feature.properties.color
        });
        return L.marker(latlng, {
            icon: mapMarker
        });
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.popup);
    }
    }).addTo(map);

    {% else %}
        markerLayer.clearLayers();
    {% endif %}

</script>

开发人员工具： enter image description here

修改切换到括号表示法icon: feature['properties']['icon']仅适用于index.html页面，而不适用于博客帖子页面。

未在Jekyll中评估的JavaScript变量包括

0 个答案: