我是否需要傳單地圖源代碼才能在HTML中使用？

我最近提供了一個小型兼職管理網站，工作描述涉及到HTML的使用，但他們希望我使用傳單創建的地圖（通過RPub &發佈，但很可能是用Java創建的）。具體將其嵌入到網站中，並將圖像添加到映射網站的標記。現在，我一直在研究結果地圖的HTML代碼，並且我看不到使用現有HTML將圖像添加到地圖的方法。也許我的HTML技能在這裏並不合格。然而，環顧網絡瞭解如何將圖像添加到小冊子標記的信息表明我可能需要在java中編輯它，而我沒有原始代碼。我是否需要原始代碼才能做到這一點？我是否需要傳單地圖源代碼才能在HTML中使用？

有問題的地圖在這裏舉行：

http://rpubs.com/roycostilla/placesofworship

我不能完全肯定，如果我失去了一些東西明顯，或者如果他們想從我這裏什麼也不是沒有地圖的Java可行碼。我很欣賞我的帖子沒有儘可能詳細，但是我有點困惑，並且壓抑了我自己，因爲我只有少量的HTML體驗，而且沒有Java。

來源

2017-04-17 Whale Biologist

不完全確定你的Java事情。

如果我的理解是正確的，您要使用的Leaflet地圖已經作爲R語言的Shiny App創建。

單張是JavaScript庫。 Shiny使用的那個庫的版本似乎是0.7.3（現在很老，但仍然有效）。

即使是該版本，也有相當不錯的API documentation。但是您需要編寫JavaScript代碼才能使用它。

現在，如果我理解正確，您想要修改地圖當前已完成的方式，例如更改標記。然後將其包含在HTML頁面中。

您有幾種選擇在這裏：

使用最初的R代碼來改變閃亮應用程序是如何創建的。我認爲您可以直接在R中自定義標記/圖標。然後您可以將它包含在頁面中的中。
從R獲取原始數據並將其輸出到JavaScript/JSON（而不是創建Shiny應用程序），以便您可以直接在全新的HTML頁面的JavaScript中操作它。參考上面的鏈接文檔來創建帶有自定義圖標的標記。
更復雜的解決方案是從Shiny App/Widget中提取數據，以便不必修改R部分。如果數據頻繁變化，將會稍微難以維護。然後，您可以操作數據並使用JavaScript創建所有自定義設置，就像上一點一樣。

這裏是3點示範：

var group = L.featureGroup(); 

$(document).ready(function() { 

    var mapContainer = $("#htmlwidget-98ae620727ee15448353")[0]; 
    var map = mapContainer["htmlwidget_data_init_result"]; 

    map.eachLayer(function(layer) { 

    // Filter only for Circle Markers, as the map looks to use only those for data. 
    if (layer instanceof L.CircleMarker) { 
     layer.addTo(group); 

     // Embed the popup data into the layer feature properties, so that it is recorded in the GeoJSON output. 
     layer.feature = layer.feature || {}; // Initialize the layer feature, in case it does not exist yet. 
     layer.feature.type = "Feature"; 
     layer.feature.properties = layer.feature.properties || {}; 
     layer.feature.properties.data = layer._popup.getContent(); 
     layer.feature.properties.color = layer.options.color; 
    } 

    }); 

    console.log(group.toGeoJSON()); 

});

現場演示：https://plnkr.co/edit/oWbewb53CLZxmfVj8WbN

一旦你有你的數據GeoJSON的，它很容易在JavaScript中創建一個新的單張地圖。參見例如小冊子GeoJSON tutorial。

注：如你的地圖擁有超過2,000點，使用標記有圖標（而不是圓形標記）瀏覽器將顯着放緩。您應該堅持使用Circle Markers（理想情況下將其繪製在Canvas而不是SVG上），或者使用羣集插件（例如， Leaflet.markercluster。

祝你好運！

來源

2017-04-17 07:56:47 ghybs

您好！謝謝你這一點，你已經成功地設法拼湊我設法拼湊什麼我需要做的，成功地與這方面的工作的所有信息。這是一個巨大的幫助。然而，有一些困惑，我不希望更改標記 - 但是當您單擊這些標記時，會彈出一個窗口，其中包含有關位置的詳細信息。我希望能夠爲位置圖像的每個彈出窗口添加一個小圖像，類似於Google地圖的工作方式。感謝您的幫助，我通常使用R編碼，但Web開發經驗很少。 –

我是否需要傳單地圖源代碼才能在HTML中使用？

回答

相關問題