我正在使用Where the ISS at API来获取ISS的当前纬度和经度值。服务器端请求如下所示：
app.get("/coordinates", async (req,res) =>{
try{
const result = await axios.get(API_URL);
const latitude = result.data.latitude;
const longitude = result.data.longitude;
res.render("index.ejs", ({latitude: latitude, longitude: longitude}))
} catch (error) {
res.status(404).send(error.message);
}
})
在我的 EJS 模板上，我有以下代码行：
<!-- leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map"></div>
<p >ISS Latitude: <span id="data-latitude"><%= latitude %></span> </p>
<p >ISS Longitude: <span id="data-longitude"> <%= longitude %></span></p>
<!-- leaflet js -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Your custom JavaScript file -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
我的客户端 JavaScript 看起来像这样：
const mapElement = document.getElementById('map');
const latitude = parseFloat(document.getElementById("data-latitude").textContent);
const longitude = parseFloat(document.getElementById("data-longitude").textContent);
// Map initialization with predetermined coordinates
var map = L.map(mapElement).setView([latitude, longitude], 8);
// osm layer
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
osm.addTo(map);
// Marker at predetermined coordinates
var marker = L.marker([latitude, longitude]).addTo(map);
当我在本地主机上加载特定路线时，我会收到一段文字，上面写着“复制代码”和下面的坐标。坐标显示得很好，但地图拒绝渲染。我是传单新手，所以我不知道这里的问题是什么。
当我在本地主机上加载特定路线时，我会收到一段文字，上面写着“复制代码”和下面的坐标。坐标显示得很好，但地图拒绝渲染。我是传单新手，所以我不知道这里的问题是什么。
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- leaflet js -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Your custom JavaScript file -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/js/main.js"></script>