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

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

我想要做的是有一个弹出窗口给出：名称，地址，指向该特定网站的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并插入该变量到没有运气。

来源

2016-02-26 Andy M

的问题正是在以下点，在那里你要创建一个字符串：

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

这应该是

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

来源

2016-02-26 21:24:22 Ioan

是的，这个作品完美。我想我需要深入研究一下才能完全理解这一点。谢谢！ –

基本上你建立一个字符串，这是连接工作的方式。 – Ioan

看来你没有正确地把你的字符串包围起来。

试试这个，让我知道，如果它的工作原理：

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>");

来源

2016-02-26 21:19:29

这工作，谢谢！用这种方式把我扔掉，我想我必须更多地与他们合作才能更好地理解它。谢谢！！ –

没问题！乐意效劳！ –

我知道你有几个“工作”的答案，但我想指出一些事情。此刻你结束了类似这样的标记：

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

这样你就不必逃避任何双引号在你的字符串。

而且i'de想指出的是，宣传单用户经常忽略的是美妙的L.Util.template方法一件事：

简单的模板设施，接受了形式的模板字符串“你好{A}，{B }'和像{a：'foo'，b：'bar'}这样的数据对象，返回评估字符串（'Hello foo，bar'）。你也可以为数据值指定函数而不是字符串 - 它们将被评估为传递数据作为参数。

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

来源

2016-02-26 22:13:48 iH8

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

回答

相关问题