Ruby на Rails 6 - Leaflet - Открытая карта улиц Не отображается на iPhone - PullRequest
Новая
       47

Ruby на Rails 6 - Leaflet - Открытая карта улиц Не отображается на iPhone

0 голосов
/ 11 марта 2020

Я пытаюсь запустить Leaflet с Open Street Map в своем приложении на Rails 6.
Как я решил добавить листовку. js запустив yarn add leaflet , поэтому я не использую драгоценный камень "leaflet-rails".
Чтобы я смог добавить часть CSS, я добавил link rel = "stylesheet" , рекомендованную в брошюре - Краткое руководство по началу работы.
Приложение просто получает ваши координаты и размещает маркер на карте с этими координатами. Простой.
В настоящее время все работает нормально, только с небольшой проблемой. Я не вижу карты ни на одном iPhone или iPad. Он получит мои координаты, разместит маркер, но не показывает карту.
Я даже не могу протестировать приложение в мобильной версии на моем локальном хосте (Inspect Element - на мобильном телефоне), здесь я Можно разрешить доступ, но это все, что я могу сделать, он ничего не делает, когда я нажимаю кнопку «Журнал».

Мои файлы выглядят следующим образом

app / javascript / application. html .erb 

<head>
<title>Trackme</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>  


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/> 

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %><br>
</head>
<body>
  <%= yield %>
</body>

app / javascript / application. js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'leaflet'
import 'bootstrap'
import '../stylesheets/application'

if ("geolocation" in navigator) {
  console.log('geolocation is available');
  navigator.geolocation.getCurrentPosition(function(position) {     
    // initialize the map on the "map" div with a given center and zoom
    const map = L.map('trackmap').setView([0, 0], 1);       

    // Required by leaflet to use it
    const attribution = '&copy; <a href=""https://www.openstreetmap.org/"">OpenStreetMap</a> contributors | &copy; Trackmi ';
    const tileURL = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
    const tiles = L.tileLayer( tileURL , {attribution} );
    tiles.addTo(map);

    // Listen for click on Log button
    const log = document.getElementById('log');
    log.addEventListener('click', function (event) {

        alert("Button Clicked")

        const lat = position.coords.latitude
        const lon = position.coords.longitude
        document.getElementById('latitude').textContent = lat
        document.getElementById('longitude').textContent = lon

        // add marker to map with the coordinates
        var marker = L.marker([lat, lon]).addTo(map)

        // set the view to the lat, lon coordinates and zoom it.
        map.setView([lat, lon], 18)

    });
});
} else {
console.log('geolocation IS NOT available');
}

app / views / static_pages / home. html .erb 

<div class="card">
<div class="card-title text-center">
      <h1> Tracking Data </h1>
</div>
  <div class="card-body">

        <p class="coordinates ptitle">Your Location is

        <div>
            Latitude = <span id='latitude'></span>&deg;
        <br>
            Longitude = <span id='longitude'></span>&deg;
        </div>

    </p>
    <div class="centeButton text-center"> 

        <button id='log' type="button" class="btn btn-primary">Log</button>
    </div>
        <br>
        <div class="d-flex justify-content-center"">  
            <div id='trackmap'></div>
        </div>
  </div>

app / javascript / application.s css

@import "custom";
@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

app / javascript / custom.s css

#trackmap {
  height: 400px;
  width: 600px;
}
.card {
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 20%;
  margin-bottom: 30%;
} 
.text-center {
  text-align: center !important;
  padding-top: 30px;
}
.ptitle {
  font-weight: bold;
}
#log {
  margin-top: 20px;
  margin-bottom: 60px;
  font-size: 1.2rem !important;
}  
@media (max-width: 576px) and (orientation : portrait) {
.card {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 20%;
}

Вы можете увидеть / запустить приложение здесь: https://trackmi.herokuapp.com/.
Вы можете проверить его на своем рабочем столе и на мобильном телефоне (Android ) это должно работать нормально. Если у вас есть iPhone или вы пытаетесь проверить его со своего рабочего стола в мобильной версии, он не работает.
Итак, мой вопрос: Что мне нужно сделать, чтобы показать карту на iPhone или iPad?

Я хотел бы заранее поблагодарить вас за помощь, которую вы можете оказать.

...