從彈出標記窗口的對象中提取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

回答

相關問題