使用 Shiny 和 leaflet 访问 R 中的 Javascript 地图

Question

我目前正在尝试使用googlelayer作为shiny R中的传单地图的基础层，这就是为什么我一直在使用shinyJs以便将Js脚本插入到我的R代码中以插入地图，这件事问题是我无法在 Javascript 代码之外访问地图，如果我查看 Js 控制台，它会显示“地图容器已被初始化”。我为您提供应用程序的代码作为可重复的科学。

###################
#### Library ######
###################
library(leaflet)
library(shiny)
library(shinythemes)
library(shinyjs)
#library(raster)
###################

setwd("D:\\R")


ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", href="https://unpkg.com/[email protected]/dist/leaflet.css"),
    tags$script(src="shared/shiny.js"),
    tags$script(src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQvaBc5_RruTllCvOxy3i9YNFYlaDzaJ8"),
    tags$script(src="https://unpkg.com/[email protected]/dist/leaflet.js"),
    tags$script(src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js')
  ),
  sidebarLayout(
    sidebarPanel(
      actionButton(inputId = "button",
                   label = "coucou")
    ),
    mainPanel(
        leafletOutput("mymap")
    )
  #)
  ),
  tags$script(HTML('$(document).on("shiny:connected", function(){
  var mymap = L.map("mymap").setView([45.777222,3.087025],4);
  var roads = L.gridLayer.googleMutant({type : "satellite"}).addTo(mymap);
  var el = document.getElementById(mymap.id);
  Shiny.onInputChange("mymap",el);

})'))
)


server <- function(input, output) {
  # output$mymap <- renderLeaflet({
  #   leaflet() %>%
  #     setView(-1.252441, 47.802332, 4)
  # })

  # jean <- reactive(input$el)
  #print(output$mymap)

  observeEvent(input$button, {
    output$mymap <- renderLeaflet({
    leafletProxy("mymap", data =input$mymap) %>%
      addMarkers(45.777222,
               3.087025,
               "btn")
    })
  })

  observeEvent(input$mymap_click, {
    cat("vroum")
  })



}

shinyApp(ui = ui, server = server)

Answer 1

您可以直接使用我的googleway包绘制Google地图

library(shiny)
library(googleway)

ui <- fluidPage(
    google_mapOutput(outputId = "map", height = 600)
)

server <- function(input, output){

    output$map <- renderGoogle_map({
        google_map(key = 'your_api_key')
    })

    observeEvent(input$map_map_click, {
        print(input$map_map_click)
    })

}

shinyApp(ui, server)

Answer 2

要回答您的问题，您可以使用以下代码访问地图：

  var el = document.getElementById("mymap");
  var map = $(el).data("leaflet-map"));

但这并不会让你添加谷歌层，因为你需要传单版本1.0.3，而R包使用版本0.7，你不能像你那样加载版本1.0.3，因为它会引发兼容性问题与 R 包。

我正在尝试做同样的事情，但到目前为止我什么也没发现。如果你能做到，我会很高兴知道如何做到。