我创建了一个闪亮的应用程序,供用户从他们想要在地图上显示的地址列表(第一个标签)中进行选择(第二个标签)。为了方便他们,我还尝试抓住他们的地理位置并将其显示在地图上。这适用于笔记本电脑,但不适用于移动设备。当我在笔记本电脑上启动应用程序时,浏览器会要求我(弹出窗口)共享我的位置。在智能手机上,这不会发生。有什么想法吗?
这是我的代码:
地理位置部分位于用户界面#" #get geolocation from##;并在#34;#添加设备位置#"。
library(shiny)
library(shinyjs)
library(leaflet)
library(dplyr)
library(sp)
#####################################################################################################
## Server #####
#####################################################################################################
server <- function(input, output) {
## data frame (normally a bigger data frame) ##
df <- data.frame(lng = c(9.615772, 9.53677), lat = c(47.78331, 47.15224), label = c("Adress 1", "Adress 2"))
## render map ##
output$mymap <- renderLeaflet({
# join input #
df_coord <- right_join(df, data.frame(label= input$address),
by="label"
)
# add device location #
if(!is.null(input$devicelat)){
you <- data.frame(lng=input$devicelong, lat=input$devicelat, label="that's you")
df_coord <- bind_rows(df_coord, you)
}
# convert to spacial points #
data <- SpatialPointsDataFrame(coords=df_coord[1:2], data = df_coord)
# create map #
mymap <- leaflet(data=data) %>%
addTiles() %>%
addMarkers(lng= ~lng,
lat= ~lat,
popup= ~label
)
mymap
})
}
#####################################################################################################
## User Interface #####
#####################################################################################################
ui <- navbarPage(title = "amazing map",
## TAB CHOOSE ADDRESS ##
tabPanel(title= "choose address",
# get geolocation from user #
tags$script('
$(document).ready(function () {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
function onError (err) {
Shiny.onInputChange("geolocation", false);
}
function onSuccess (position) {
setTimeout(function () {
var coords = position.coords;
console.log(coords.latitude + ", " + coords.longitude);
Shiny.onInputChange("geolocation", true);
Shiny.onInputChange("devicelat", coords.latitude);
Shiny.onInputChange("devicelong", coords.longitude);
}, 1100)
}
});
'),
fluidRow(
column(6,
offset = 3,
wellPanel(
checkboxGroupInput("address",
label = h3("Choose address to display"),
choiceNames = as.character(df$label),
choiceValues = df$label
)
)
)
)
),
## TAB MAP ##
tabPanel(title= "see the address",
tags$head(tags$style(HTML("#mymap {height: calc(100vh - 81px) !important;}")
)),
fluidRow(leafletOutput("mymap", width = "100%"))
)
)
shinyApp(ui = ui, server = server)