Fatal编程技术网
  • javascript/
  • Javascript 输出忽略<；头>；或<；脚本>；标签

Javascript 输出忽略<；头>；或<；脚本>；标签

javascript html r api shiny

Javascript 输出忽略<；头>；或<；脚本>；标签,javascript,html,r,api,shiny,Javascript,Html,R,Api,Shiny,我正试图通过Outdooractive的API在我闪亮的应用程序中包含Outdooractive（.com）映射，该API使用一个html页面，页眉中有一个脚本标记，正文中有一个JavaScript标记 使用Outdooractive的html模板时，将其保存为html文件，然后通过includeHTML（“originalFile.html”）将其包含在闪亮的应用程序中，地图将正确显示。但是，由于我希望地图的坐标是交互式的（不在两者之间保存到文件），因此我尝试使用闪亮的标记在renderUI中

我正试图通过Outdooractive的API在我闪亮的应用程序中包含Outdooractive（.com）映射，该API使用一个html页面，页眉中有一个脚本标记，正文中有一个JavaScript标记

使用Outdooractive的html模板时，将其保存为html文件，然后通过
includeHTML（“originalFile.html”）
将其包含在闪亮的应用程序中，地图将正确显示。但是，由于我希望地图的坐标是交互式的（不在两者之间保存到文件），因此我尝试使用闪亮的标记在
renderUI
中创建html，并通过
uiOutput
显示它。这样做时，JavaScript部分似乎根本没有被处理。将显示地图上方的标题及其下方的文本，但地图将被忽略，且不会显示错误消息。有趣的是，当我将标签
tags$head
替换为
tags$header
时也会发生同样的情况

这是我的
app.R
：

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("Outdooractive Map"),

    # Sidebar with a text input for coordinates
    sidebarLayout(
        sidebarPanel(
            textInput ("lng",
                        "Longitude:",
                       value = "10.000",
                    ),
            textInput("lat",
                      "Latitude:",
                      value = "45.555")
        ),

        # Show the map 
        mainPanel(
            #includeHTML("originalFile.html") # This works
            textOutput("text"), # This shows the correct longitude/latitude
            uiOutput("map") # This seems to ignore the script
        )
    )
)

# Define server logic required to access API
server <- function(input, output) {
    
    output$map <- renderUI({
        lng = input$lng
        lat = input$lat
        
        tags$html(
            tags$div(
                tags$head(tags$title("Test"),
                          HTML('<meta charset="utf-8">'),
                          tags$script(
                              src = '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
                          ),
                          tags$style(HTML(
                              '.oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {background-color: red;}'
                          ))),
                tags$body(
                    h2("Outdooractive Routes"),
                    div(class = 'oax-top-cont'),
                    tags$script(HTML(paste(
                        'var conf = {frontendtype: "tour", zoom: 11, center:[ ', lng, ", ",  lat, ']}; var fvp = oa.api.flexviewpage( conf );')
                    )),
                    HTML('There should be a map on top of me.')
                )
            ),

        )
    })
    
    output$text <- renderText ({
        paste(input$lng, input$lat)
    })
}

# Run the application 
shinyApp(ui = ui, server = server)
任何指针都将不胜感激。

我宁愿在观察家中调用一些
JavaScript
：

库（闪亮）
图书馆（shinyjs）
图书馆（胶水）
#为绘制直方图的应用程序定义UI

我非常感谢你！地图现在使用最初定义的坐标正确显示地图，但是当您以交互方式更改坐标时，它是否做出了适当的反应？当我这样做时，地图会向右跳一点，然后回到原始坐标，就好像新的
JS
不断被旧的覆盖一样。是这样吗？如果是这样，在运行更新的脚本之前，是否有方法停止旧脚本？当我更改坐标时，将重新绘制地图，显示输入中选择的中心坐标。这是在您键入时发生的，因此您可能需要
？去Bounce
对文本输入更改不立即作出反应，而只在soem时间内作出反应？我添加了一个
操作按钮
，这样它只会在我输入完整坐标后进行处理，但仍然不会更新。有趣的是，它一旦在网上发布就可以工作，这就是我所需要的。谢谢！奇怪的是，我添加了一个gif来显示地图转换是如何为我工作的。根本没有“向右跳”。

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


    <style>
      .oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {
          background-color: red;
      }
    </style>

  </head>
  <body>
  <br>
  <br>
    <h2>Outdooractive Routes</h2>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>