时间戳

首页 > 解决方案 > 刷新使用 Leafletjs 创建的地图的标记

javascript - 刷新使用 Leafletjs 创建的地图的标记

问题描述

我的目标是制作一张每 10 分钟更新一次标记的地图。

用于定位标记的数据位于电子表格文档中，并且该数据会定期更新。

我设法从电子表格中检索数据并毫无顾虑地定位标记，我阻止了每 10 分钟更新一次标记位置。

我已经尝试了几种方法，页面重新加载但它是空的......

你能指导我解决问题吗？

先感谢您

数据表由 3 列组成。

  1. 姓名
  2. 描述
  3. 地理坐标（例如：“50.406583, 3.916111”）

索引.html

<!DOCTYPE html>
<html>
<head>

    <title>Mapping SainaTech</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    
</head>
<body>

<div id="mapid" style="width: 1600px; height: 900px;"></div>
<script>
 
    var mymap = L.map('mapid').setView([50.60, 4.50], 8.5);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

  //L.marker([50.753013, 4.513766]).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.");

  google.script.run.withSuccessHandler(onSuccess).getList();

  function onSuccess(data)
  {
    for (var i = 0; i < data[0][3]; i++)
    {
      var coordSplit = data[i][2].split(', ');
      marker = L.marker( L.latLng( coordSplit ) ).addTo(mymap).bindPopup(data[i][1] + " [" + data[i][0] + "]");
    }
  }
</script>

</body>
</html>

代码.gs

function doGet(e)
{
  return HtmlService.createHtmlOutputFromFile('Index.html');
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function getList()
{
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var locationSheet = ss.getSheetByName("LOCATIONS");
  var getLastRow = locationSheet.getLastRow();

  var out = locationSheet.getRange(2, 1, getLastRow - 1, 4).getValues();

  out[0][3] = getLastRow -1 ;

  return out;
}

标签： javascripthtmlmappingspreadsheet

解决方案

如果我继续 META，则刷新开始，但我有一个空白页。一个主意 ？

<head>
  <meta http-equiv="refresh" content="30">
</head>

推荐阅读