douwen3500 2019-05-24 11:28 采纳率: 0%
浏览 110

如何应用日期范围过滤器在Leaflet地图中显示标记?

I'm trying to view the Leaflet map showing events in certain locations on the specified dates. As for now I've managed to customise a map to display markers for all the events taken from mysql database. The next step is to apply the time filter.

I've already applied the time filter to the table (using the same data that the map). So I've got three files: - event.php - which displays a map and a table as well as a filter (with apply button) - applychanges.php - which is ran when the button is pressed. It doesn't contain any information about the map, but the specified date range is passed to this file to affect the table - getlocation.php - this file uses a jquery to obtain the location info from mysql and converts data into a json format - for a Leaflet map to be able to use it.

My problem is that when I try to modify getlocation.php file to pass info about time range I loose markers completely. I've tried to pass variables value through: 1.AJAX - by passing data to url: getlocation.php 2. Including a file containing time range variables into getlocation.php 3. Passing variables through the session, like this: applychanges.php

session_start();
$_SESSION['beg'] = $_POST["range_beginning"];
$_SESSION['end'] = $_POST["range_end"];
```php
getlocation.php
```php
 session_start();

and adding the following to my jquery

WHERE cast(eventdate as date) BETWEEN '".$_SESSION['beg']."' AND '".$_SESSION['end']."'

event.php datepicker code

$(document).ready(function(){  
           $.datepicker.setDefaults({  
                dateFormat: 'yy-mm-dd'   
           });  
           $(function(){  
                $("#range_beginning").datepicker();  
                $("#range_end").datepicker();  
           });  
           $('#applyFilter').click(function(){  
                var range_beginning = $('#range_beginning').val();  
                var range_end = $('#range_end').val();  
                if(range_beginning != '' && range_end != '')  
                {  
                     $.ajax({  
                          url: "applychanges.php",
                          method:"POST",  
                          data:{range_beginning:range_beginning, range_end:range_end},  
                          success:function(data)  
                          {  
                               $('#table').html(data);  
                          }  
                     });  
                }  
                else  
                {  
                     alert("Incorrect input. Please Select Date");  
                }  
           });  
      });

leaflet - setting up markers of the previously defined variable map

            function showCallLocation(map) {

                var markerIcon = L.icon({
                    iconUrl: "./pics/marker.png",
                    iconSize: [25,25]
                });
                $.getJSON("getlocation.php", function(data) {
                    for (var i = 0; i < data.length; i++) {
                        var location = new L.LatLng(data[i].Latitude, data[i].Longitude);
                        var event_location = data[i].city + " (" + data[i].country + ")";
                        var marker = new L.Marker(location, {
                            icon: markerIcon,
                            title: event_location 
                        });
                        marker.addTo(map);
                    }
                });
            }
        </script>

getlocation.php

<?php
    require "connect.php";


    $sql="SELECT * FROM events; //gets location name as well as the map coordinates - longitude and latitude

    if (!$rs) {
        echo "An SQL error occured.
";
        exit;
    }
    $rows = array();

    while($r = mysqli_fetch_assoc($rs)) {
        $rows[] = $r;
    }
    print json_encode($rows);
?>

So I would like to find the way to pass the time range variables to jquery in getlocation.php or to apply the filter (on events shown on the map) a different way. Thanks

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
    • ¥15 名为“Product”的列已属于此 DataTable
    • ¥15 安卓adb backup备份应用数据失败
    • ¥15 eclipse运行项目时遇到的问题
    • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
    • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
    • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
    • ¥50 成都蓉城足球俱乐部小程序抢票
    • ¥15 yolov7训练自己的数据集
    • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)