将"经度搜索"小部件添加到闪亮的传单地图中

Question

我希望将Lattitude/经度搜索小部件添加到闪亮的传单地图中。 我在这里找到了一个可行的传单js解决方案，我想将js函数移植到我的R Shiny应用程序中。 使用带有panTo的htmlwidgets渲染函数，我可以让地图平移到特定的坐标;但是，我希望用户能够输入纬度和长度并缩放到地图上的该位置。下面是我一直用来测试潜在解决方案的示例地图的代码。 我尝试将提交的坐标应用于地图失败。onRender中注释掉的代码是我的尝试之一。任何协助将不胜感激。 谢谢！

library(shiny)
library(leaflet)
ui <- fluidPage(leafletOutput("mymap"),
tags$div(
HTML(
'
Latitude: <input type="text" name="lat" id="lat"/>
Longitude: <input type="text" name="lng" id="lng"/>
<input type="button" onclick="zoomTo()" value="zoomTo"/>
'
)
))
server <- function(input, output, session) {
output$mymap <- renderLeaflet({
leaflet() %>%
addProviderTiles(providers$Stamen.TonerLite,
options = providerTileOptions(noWrap = TRUE)) %>%
setView(15, 47, 12) %>%
htmlwidgets::onRender(
'function(el, x) {                        
this.panTo(new L.LatLng(26, -80));                        
#var lat = document.getElementById("lat").value;
#var lng = document.getElementById("lng").value;
#this.panTo(new L.LatLng(lat, lng));

}'
)
})
}
shinyApp(ui, server)

Answer 1

通过在renderLeaflet语句中引用input$zoomTo，如果单击该按钮，Shiny 将重新运行该函数。为了使它工作，我必须为按钮分配一个id和正确的class。

我不确定为什么你使用HTML和JavaScript来完成所有这些工作，而不是使用Shiny提供的小部件。查看 Shiny Widget 库，了解仅使用 R 功能可以实现哪些功能。

library(shiny)
library(leaflet)
ui <- fluidPage(leafletOutput("mymap"),
tags$div(
HTML(
'
Latitude: <input type="text" name="lat" id="lat"/>
Longitude: <input type="text" name="lng" id="lng"/>
<input id="zoomTo" type="button" value="zoomTo"  class="action-button"/>
'
)
))
server <- function(input, output, session) {
output$mymap <- renderLeaflet({
input$zoomTo
leaflet() %>%
addProviderTiles(providers$Stamen.TonerLite,
options = providerTileOptions(noWrap = TRUE)) %>%
setView(15, 47, 12) %>%
htmlwidgets::onRender(
'function(el, x) {                        
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;
this.panTo(new L.LatLng(lat, lng));
}'
)
})
}
shinyApp(ui, server)