Shinydashboard：Google商家信息自动填充功能。 InvalidValueError：不是HTMLInputElement的实例

Question

我正在尝试将shinydashboard放在一起并将Google地方信息搜索框作为文本输入。下面的代码在常规的shiny页面中运行，但是当它被放入InvalidValueError: not an instance of HTMLInputElement时会抛出shinydashboard错误。 （见下图）

我不知道为什么它会在常规的shiny应用程序中运行，但不能在shinydashboard内部运行。

错误的屏幕截图：

最小的可重现代码示例：

注意：首先插入您的Google API密钥

library(shiny)
library(googleway)
library(shinydashboard)

#key <- "MyKey"
#set_key(key = key)
#google_keys()


ui<- shinydashboard::dashboardPage(
  dashboardHeader(title = "Look @ Console"),
  dashboardSidebar(list(sidebarMenuOutput("sideBar_menu_UI"))), 
  dashboardBody(
    HTML(paste0(" <script> 
                 function initAutocomplete() {

                var autocomplete = new google.maps.places.Autocomplete(document.getElementById('my_address'),{types: ['geocode']});
                autocomplete.setFields(['address_components', 'formatted_address',  'geometry', 'icon', 'name']);
                autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                return;
                }

                var addressPretty = place.formatted_address;
                var address = '';
                if (place.address_components) {
                address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || ''),
                (place.address_components[3] && place.address_components[3].short_name || ''),
                (place.address_components[4] && place.address_components[4].short_name || ''),
                (place.address_components[5] && place.address_components[5].short_name || ''),
                (place.address_components[6] && place.address_components[6].short_name || ''),
                (place.address_components[7] && place.address_components[7].short_name || '')
                ].join(' ');
                }
                var address_number =''
                address_number = [(place.address_components[0] && place.address_components[0].short_name || '')]
                var coords = place.geometry.location;
                //console.log(address);
                Shiny.onInputChange('jsValue', address);
                Shiny.onInputChange('jsValueAddressNumber', address_number);
                Shiny.onInputChange('jsValuePretty', addressPretty);
                Shiny.onInputChange('jsValueCoords', coords);});}
                </script> 
                <script src='https://maps.googleapis.com/maps/api/js?key=", key,"&libraries=places&callback=initAutocomplete' async defer></script>"))
    ,uiOutput("tabContentUI")
  )
)



server <- function(input, output) {

  output$sideBar_menu_UI <- renderMenu({
    sidebarMenu(id = "sideBar_Menu",

                menuItem("Data Import", tabName="datatab", icon = icon("database")),
                conditionalPanel("input.sideBar_Menu=='datatab'", 
                                 shiny::radioButtons(inputId = "upload_custom_data", label = "Do You Want To Upload Your Own Data?",
                                                     choices  = c("Yes"=TRUE, "No"=FALSE), selected = FALSE, inline = TRUE),
                                 shiny::uiOutput("conditionalFileInputUI")),
                menuItem("AnotherMenu", tabName = "anotherMenu", icon = icon("list-ol")))
  }) 

  output$conditionalFileInputUI<- shiny::renderUI({
    if(input$upload_custom_data == TRUE){}
    if(input$upload_custom_data == FALSE){
      list(
        shiny::textInput(inputId = "my_address", label = "Search For Address", width = "350px"),
        shiny::actionButton(inputId = "add_btn", label = "Add To Dataset", icon = icon("plus"))
      )

    }
  })

  ### Output$Stuff Here
  output$anotherMenu_content<- shiny::renderText({"This is some text" })
  output$datatab_content<- shiny::renderUI({ list(shiny::uiOutput("full_address"), shiny::uiOutput("my_map")) })

  #### Tab Content UI Materials
  output$tabContentUI<- shiny::renderUI({
    shinydashboard::tabItems(
      shinydashboard::tabItem(tabName = "datatab", shiny::uiOutput("datatab_content")), 
      shinydashboard::tabItem(tabName = "anotherMenu", shiny::textOutput("anotherMenu_content"))
    )
  })

  my_address <- reactive({
    if(!is.null(input$jsValueAddressNumber)){
      if(length(grep(pattern = input$jsValueAddressNumber, x = input$jsValuePretty ))==0){
        final_address<- c(input$jsValueAddressNumber, input$jsValuePretty)
      } else{
        final_address<- input$jsValuePretty
      }
      final_address
    }
  })

  output$full_address <- renderText({
    if(!is.null(my_address())){
      paste0("The Fuller and Fixed Address is... ", my_address())
    }
  })

  output$my_map <- renderGoogle_map({
    my_address <- my_address()
    shiny::validate(
      need(my_address, "Address not available")
    )

    gdat <- google_geocode(address = my_address)
    my_coords <- geocode_coordinates(gdat)
    my_coords <- c(my_coords$lat[1], my_coords$lng[1])

    google_map(
      location = my_coords,
      zoom = 12,
      map_type_control = FALSE,
      zoom_control = FALSE,
      street_view_control = FALSE
    )
  })

}

shinyApp(ui, server)

我很想知道是否有人知道如何解决这个问题？我很感激任何反馈。先感谢您。

--nate

更新：

我还没有解决这个问题。但是，通过反复试验，我注意到如果我从server.R文件中取出“搜索地址”输入并将原始HTML放入UI部分，我可以恢复一些功能。

将此代码放入UI可获得部分解决方案......（格式化道歉）

  shinydashboard::dashboardSidebar(width = "400px",


list(shinydashboard::sidebarMenuOutput(outputId = "sideBar_menu_UI"),


 HTML('<div class="form-group shiny-input-container"> <label for="my_address">Type An Address</label> <input id="my_address" type="text" class="form-control" value=""/> </div>'))),

更新的UI现在看起来像这样：

Answer 1

我能够做到这一点的唯一方法是采用所有的逻辑，将sidebarMenu渲染出server.R文件并将其放入ui.R文件中。

最终的工作解决方案是：

library(shiny)
library(googleway)
library(shinydashboard)

#key <- "MyKey"
#set_key(key = mygoogleapikey)
#google_keys()


ui<- shinydashboard::dashboardPage(
  dashboardHeader(title = "This Works"),
  dashboardSidebar(shinydashboard::sidebarMenu(id="sideBar_Menu",
                                              menuItem("Data Import", tabName="datatab", icon = icon("database")),
                                              conditionalPanel("input.sideBar_Menu=='datatab'",
                                              shiny::radioButtons(inputId = "upload_custom_data", label = "Do You Want To Upload Your Own Data?", choices  = c("Yes"=TRUE, "No"=FALSE), selected = TRUE, inline = TRUE),

                                              conditionalPanel("input.upload_custom_data == 'TRUE'",
                                                               shiny::actionButton("go", "Go")),

                                              conditionalPanel("input.upload_custom_data == 'FALSE'",
                                                               textInput(inputId = "my_address", label = "Type An Address"),
                                                               shiny::actionButton(inputId = "add_btn", label = "Add To Dataset", icon = icon("plus")))


                                               ), # with outer conditional menu
                                               menuItem("AnotherMenu", tabName = "anotherMenu", icon = icon("list-ol"))
  ) # with sidebar menu
  ),

  dashboardBody(
    HTML(paste0(" <script> 
                function initAutocomplete() {

                var autocomplete = new google.maps.places.Autocomplete(document.getElementById('my_address'),{types: ['geocode']});
                autocomplete.setFields(['address_components', 'formatted_address',  'geometry', 'icon', 'name']);
                autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                return;
                }

                var addressPretty = place.formatted_address;
                var address = '';
                if (place.address_components) {
                address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || ''),
                (place.address_components[3] && place.address_components[3].short_name || ''),
                (place.address_components[4] && place.address_components[4].short_name || ''),
                (place.address_components[5] && place.address_components[5].short_name || ''),
                (place.address_components[6] && place.address_components[6].short_name || ''),
                (place.address_components[7] && place.address_components[7].short_name || '')
                ].join(' ');
                }
                var address_number =''
                address_number = [(place.address_components[0] && place.address_components[0].short_name || '')]
                var coords = place.geometry.location;
                //console.log(address);
                Shiny.onInputChange('jsValue', address);
                Shiny.onInputChange('jsValueAddressNumber', address_number);
                Shiny.onInputChange('jsValuePretty', addressPretty);
                Shiny.onInputChange('jsValueCoords', coords);});}
                </script> 
                <script src='https://maps.googleapis.com/maps/api/js?key=", key,"&libraries=places&callback=initAutocomplete' async defer></script>"))
    ,uiOutput("tabContentUI")
    )
    )



server <- function(input, output) {




  ### Output$Stuff Here
  output$anotherMenu_content<- shiny::renderText({"This is some text" })
  output$datatab_content<- shiny::renderUI({ list(shiny::uiOutput("full_address"), shiny::uiOutput("my_map")) })

  #### Tab Content UI Materials
  output$tabContentUI<- shiny::renderUI({
    shinydashboard::tabItems(
      shinydashboard::tabItem(tabName = "datatab", shiny::uiOutput("datatab_content")), 
      shinydashboard::tabItem(tabName = "anotherMenu", shiny::textOutput("anotherMenu_content"))
    )
  })

  my_address <- reactive({
    if(!is.null(input$jsValueAddressNumber)){
      if(length(grep(pattern = input$jsValueAddressNumber, x = input$jsValuePretty ))==0){
        final_address<- c(input$jsValueAddressNumber, input$jsValuePretty)
      } else{
        final_address<- input$jsValuePretty
      }
      final_address
    }
  })

  output$full_address <- renderText({
    if(!is.null(my_address())){
      paste0("The Fuller and Fixed Address is... ", my_address())
    }
  })

  output$my_map <- renderGoogle_map({
    my_address <- my_address()
    shiny::validate(
      need(my_address, "Address not available")
    )

    gdat <- google_geocode(address = my_address)
    my_coords <- geocode_coordinates(gdat)
    my_coords <- c(my_coords$lat[1], my_coords$lng[1])

    google_map(
      location = my_coords,
      zoom = 12,
      map_type_control = FALSE,
      zoom_control = FALSE,
      street_view_control = FALSE
    )
  })

}

shinyApp(ui, server)