Javascript 将纬度/经度搜索小部件添加到闪亮的传单地图

我正在寻找添加一个格子/经度搜索小部件到一个闪亮的传单地图。我找到了一个可行的传单js解决方案，我想将js函数移植到我的R应用程序中。使用panTo的htmlwidgets onRender函数，我可以将地图平移到特定坐标；但是，我希望用户能够输入lat和long并缩放到地图上的那个位置。下面是我用来测试潜在解决方案的示例图的代码。我尝试将提交的坐标应用于地图时失败。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)

库（闪亮）
图书馆（单张）
ui%
htmlwidgets:：onRender(
'函数（el，x）{
这是panTo（新L.LatLng（26，-80））；
#var lat=document.getElementById（“lat”）.value；
#var lng=document.getElementById（“lng”）.value；
#这是panTo（新L.LatLng（lat，lng））；
}'
)
})
}
shinyApp（用户界面、服务器）

通过在

renderleaft

语句中引用

input$zoomTo

，如果单击该按钮，Shining将重新运行该函数。为了让它工作，我必须给按钮分配一个

id

和正确的

类

我不知道为什么要使用HTML和JavaScript来完成所有这些，而不是使用Shiny提供的小部件。请看一下，看看仅使用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)

库（闪亮）
图书馆（单张）
ui%
htmlwidgets:：onRender(
'函数（el，x）{
var lat=document.getElementById（“lat”）.value；
var lng=document.getElementById（“lng”）.value；
这是panTo（新L.LatLng（lat，lng））；
}'
)
})
}
shinyApp（用户界面、服务器）
谢谢你！我能够实施你的解决方案。你关于使用本地闪亮小部件的评论让我意识到我过度思考了我的问题。我有另一个版本使用lat/long numericInputs，它与传单函数中的setView相关联：observeEvent（输入$zoomTo，{传单代理（“mymap”）%%>%setView（输入$slat，输入$slon，12）}）