Question

传单新手，基本上与编程有关。

我正在制作啤酒厂地图，显示该州周围的酿酒厂，酿酒厂，葡萄园等地点。

我想要做的是有一个弹出窗口，它给出：名称，地址，特定网站的URL。

我已经找到了名称/地址部分，但我无法弄清楚如何从对象的属性中提取URL。我尝试了很多迭代，没有工作（甚至部分工作）。

同样，我的搜索没有结果，但我不能成为唯一一个试图这样做的人。糟糕的搜索技巧？

//load GeoJSON from an external file
  $.getJSON("breweries.geojson",function(data){
    var pintGlass = L.icon({
      iconUrl: 'glass.png',
      iconSize: [24,48]
    });
    var popupMarker = L.geoJson(data,{
      pointToLayer: function(feature,latlng){
        var marker = L.marker(latlng,{icon: pintGlass});
        marker.bindPopup("<strong>" + feature.properties.NAME + "</strong>    </br/>" + feature.properties.STREETNUM
            + " " + feature.properties.STREET + ", " + feature.properties.CITY + <a href=feature.properties.URL>feature.properties.URL</a>);
        return marker;
      }
    });
    var clusters = L.markerClusterGroup();
    clusters.addLayer(popupMarker);
    map.addLayer(clusters);
  });

marker.bindPopup的最后一位是故障点。我试过单引号，双引号，没有运气。我尝试创建一个变量来拉出object.properties.URL并将该变量插入到运气中。

Answer 1

您似乎没有正确封闭字符串。

试试这个并告诉我它是否有效：

marker.bindPopup("<strong>" + feature.properties.NAME + "</strong></br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + " <a href=" + feature.properties.URL + ">" + feature.properties.URL + "</a>");

Answer 2

问题恰好在以下几点，您尝试创建字符串：

+ <a href=feature.properties.URL>feature.properties.URL</a>

应该是

+ "<a href=" + feature.properties.URL + ">" + feature.properties.URL + "</a>"

Answer 3

我知道你有几个＆＃34;工作＆＃34;答案，但我想指出一些事情。目前你最终得到这样的标记：

<a href=http://example.org>http://example.org</a>

但HTML中的最佳做法是确保属性值包含在双引号中，如下所示：

<a href="http://example.org">http://example.org</a>

要实现这一目标，您必须执行以下操作：

"<a href=\"" + feature.properties.URL + "\">" + feature.properties.URL + "</a>"

注意对双引号进行处理的斜杠，斜杠会转义以下双引号，以便将其视为字符串。像这样的事情可以很快变得非常丑陋。这就是为什么当您使用javascript连接HTML时，它只是使用单引号的原因：

'<a href="' + feature.properties.URL + '">' + feature.properties.URL + '</a>'

这样你就不必转义你的字符串中的任何双引号。

我想指出Leaflet用户经常忽略的一个很棒的L.Util.template方法：

简单的模板工具，接受表格＆＃39; Hello {a}，{b}＆＃39;和{a：＆＃39; foo＆＃39;，b：＆＃39; bar＆＃39;}之类的数据对象返回已计算的字符串（＆＃39; Hello foo，bar＆＃39;）。您还可以为数据值指定函数而不是字符串 - 它们将被评估为将数据作为参数传递。

http://leafletjs.com/reference.html#util-template

使用它可以消除你现在正在做的很多麻烦，例如：

var values = {
    a: feature.properties.NAME,
    b: feature.properties.STREETNUM,
    c: feature.properties.STREET,
    d: feature.properties.CITY,
    e: feature.properties.URL
};    

var templateString = '<strong>{a}</strong><br>{b} {c}, {d} <a href="{e}">{e}</a>';

var htmlString = L.Util.template(templateString, values);

从弹出标记窗口的对象中提取URL

3 个答案: