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

Question

传单的新手，基本上所有与编程相关的东西。

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

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

我已经弄清楚了 Name/Address 部分，但我就是不知道如何从对象的属性中提取 URL。我已经尝试了很多迭代，none 工作（甚至部分工作）。

同样，我的搜索没有结果，但我不可能是唯一一个尝试这样做的人。搜索技巧不好？

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

我知道您有几个 "working" 的答案，但我想指出一些事情。目前你的标记是这样的：

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

注意双引号后面的斜线，斜线转义了后面的双引号，因此它被当作字符串处理。像这样的事情很快就会变得非常丑陋。这就是为什么当您将 HTML 与 javascript 连接时最好只使用单引号：

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

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

我想指出一个 Leaflet 用户经常忽略的事情，那就是美妙的 L.Util.template 方法：

Simple templating facility, accepts a template string of the form 'Hello {a}, {b}' and a data object like {a: 'foo', b: 'bar'}, returns evaluated string ('Hello foo, bar'). You can also specify functions instead of strings for data values — they will be evaluated passing data as an argument.

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 window

Pulling URLs from objects for popup marker window

html

leaflet