1

我正在尝试在我的 Rails 6 应用程序上运行带有 Open Street Map 的 Leaflet。
因为我决定通过运行yarn add leaflet添加leaflet.js，所以我没有使用 gem“leaflet-rails”。
为了能够添加其中的 CSS 部分，我最终添加了Leaflet - 快速入门指南中推荐的链接 rel="stylesheet" 。
该应用程序只需获取您的坐标并使用这些坐标在地图上放置一个标记。简单的。
目前，一切正常，只有一个小问题。我在任何 iPhone 或 iPad 上都看不到地图。它会得到我的坐标，放置标记但不显示地图。
我什至无法在我的本地主机上测试移动版本上的应用程序（检查元素 - 在移动设备上），在这里我可以允许访问，但这就是我所能做的，当我点击日志按钮时它什么也没做。

我的文件如下所示

应用程序/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>

应用程序/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>

应用程序/javascript/application.scss

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

应用程序/javascript/custom.scss

#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 上显示地图？

我要提前感谢您提供的帮助。

4

0 回答 0