我是否需要传单地图源代码才能在HTML中使用？

Question

我最近提供了一个小型兼职管理网站，工作描述涉及到HTML的使用，但他们希望我使用传单创建的地图（通过RPub &发布，但很可能是用Java创建的）。具体将其嵌入到网站中，并将图像添加到映射网站的标记。现在，我一直在研究结果地图的HTML代码，并且我看不到使用现有HTML将图像添加到地图的方法。也许我的HTML技能在这里并不合格。然而，环顾网络了解如何将图像添加到小册子标记的信息表明我可能需要在java中编辑它，而我没有原始代码。我是否需要原始代码才能做到这一点？

有问题的地图在这里举行：

http://rpubs.com/roycostilla/placesofworship

我不能完全肯定，如果我失去了一些东西明显，或者如果他们想从我这里什么也不是没有地图的Java可行码。我很欣赏我的帖子没有尽可能详细，但是我有点困惑，并且压抑了我自己，因为我只有少量的HTML体验，而且没有Java。

Answer 1

不完全确定你的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。

祝你好运！