Интеграция Leaflet в JQX Splitter - PullRequest
Новая
       29

Интеграция Leaflet в JQX Splitter

0 голосов
/ 12 декабря 2018

У меня есть вопрос, я пытаюсь использовать сплиттер jqx, который разделит мою страницу на 2 части, одна из которых будет содержать карту листовки, другая будет содержать таблицу с человекомù.Проблема в том, что для листовки для карты требуется контейнер div с определенным идентификатором, но в jqx splitter у контейнера div не может быть идентификатора ... поэтому я не знаю, как сделать так, чтобы карта помещалась в div разделителя.ниже я опубликую свой код. 

    <html>
<head>
<title id='Description'>Test</title>
<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>
<link rel="stylesheet" href="tesi.css" type="text/css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" 
/>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ 
size: '70%', min: 600 }, { size: '30%', min:250 }] });
});
</script>
</head>
<body>
<div style="border: none;" id='splitter'>
    <div>
      <script>
          var mymap = L.map("mapid").setView([67, 280], 2);
          var bounds = [[0,0], [100,500]];
          var image = L.imageOverlay('polo.jpg', bounds).addTo(mymap);
          var x = 145;
          var y = 38;
          var marker = L.marker([y, x]).addTo(mymap);
          let i=0;
          mymap.on('click', function(ev) {
            alert(ev.latlng);
            marker = L.marker(ev.latlng).addTo(mymap);
          });
          function Start(){
            (function Loop(i) {
              setTimeout(function () {
                x=x+0.5;
                y=y+0.3;
                marker.setLatLng([y, x]).update()
                if (--i) {          // If i > 0, keep going
                  Loop(i);       // Call the loop again, and pass it the 
current value of i
                }
              }, 50); //time in millis
            })(100); //numbers of loops
          }
        </script>
      </div>
    </div>
    <div><button onclick="Start()">Start Simulation</button> </div>
  </div>
</body>
</html>
...