R Markdown编织时leaflet地图不显示，调换代码块顺序恢复正常求助

问题原因 #

wordcloud2依赖HTML5 Canvas和JavaScript渲染，它输出的JS代码可能会干扰后续leaflet地图的JS加载或DOM初始化，导致leaflet无法正常显示；调换顺序后leaflet先加载完成，就不会被wordcloud2的JS影响。

具体解决办法 #

• 方法1：给leaflet代码块加隔离渲染选项
  在leaflet的代码块中添加results='asis'参数，同时用HTML标签包裹输出，确保渲染环境隔离：

  ```{r, results='asis'}
  library(leaflet)
  # 先输出一个独立的容器div
  cat('<div style="width:100%; height:400px;"></div>')
  print(leaflet(listings_NA %>%
            select(latitude, longitude, neighbourhood, price))%>%
      setView(lat = 40.863, lng = 14.2767, zoom = 12)%>%
      addTiles()%>%
      addMarkers(clusterOptions = markerClusterOptions()))
  

• 方法2：用htmlwidgets分离保存再引入
  把两个组件分别保存为独立的HTML小部件，再在R Markdown中通过iframe引入，彻底隔离渲染环境：

  ```{r}
  library(htmlwidgets)
  # 保存词云
  wc <- wordcloud2(wordcloud_data, shape = "diamond", color = "White", backgroundColor = "steelblue", fontFamily = "Georgia")
  saveWidget(wc, "wordcloud.html", selfcontained = FALSE)
  
  # 保存地图
  map <- leaflet(listings_NA %>% select(latitude, longitude, neighbourhood, price))%>%
    setView(lat = 40.863, lng = 14.2767, zoom = 12)%>%
    addTiles()%>%
    addMarkers(clusterOptions = markerClusterOptions())
  saveWidget(map, "leaflet_map.html", selfcontained = FALSE)
  

  然后在R Markdown的合适位置添加HTML代码：
  ```html
  <iframe src="wordcloud.html" width="100%" height="400px" frameborder="0"></iframe>
  <iframe src="leaflet_map.html" width="100%" height="400px" frameborder="0"></iframe>
  

• 方法3：用widgetframe包裹wordcloud2
  给wordcloud2的输出套上widgetframe::frameWidget()，让它在独立iframe里渲染，不会影响后续的leaflet：

  ```{r}
  library(widgetframe)
  wc <- wordcloud2(wordcloud_data, shape = "diamond", color = "White", backgroundColor = "steelblue", fontFamily = "Georgia")
  frameWidget(wc, width = "100%", height = "400px")
  

内容的提问来源于stack exchange，提问作者Corvinus