Question

我被困在这2天了。我有一个从文件中获取的坐标，并使用折线在地图上绘制它们。我有复选框来显示每条路线的日期（折线），并在悬停时我在地图上更改该路线的颜色。同样在选中/取消选中时，有一个显示/隐藏折线的功能。我有5条折线。其中3个在2014/10/17，2个在2014/10/16。我如何按日期分组此路线，当我取消选中2014/10/17日期2014/10/17的折线时消失。

以下是一些代码：

$ this-＆gt; gmaps将运行5次。所以我有5个变量Route1，Route2 ......

<script>
var map;
<?
$i = 0;
foreach ($this->gmaps as $value) {
    echo 'var Route' . $i . ';';
    $i++;
}
?>

这里我用一个坐标

的所有坐标填充一个数组allcoordinates

    function initialize() {
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);


        var allcoordinates = [
<?
foreach ($this->gmaps as $value) {
    echo $value;
}
?>
        ];

这里我用每条折线的坐标填充数组坐标

<?
$i = 0;
foreach ($this->gmaps as $value) {

echo 'var coords = [';
echo $value;
echo '];';

echo "Route" . $i . " = new google.maps.Polyline({
                        path: coords,
                        geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.5,
                        strokeWeight: 3
                });";



$i++;
 }
 ?>

设置界限

    var bounds = new google.maps.LatLngBounds();    // set bounds
    for (var i = 0; i < allcoordinates.length; i++) {
        bounds.extend(allcoordinates[i]);
    }
    bounds.getCenter();
    map.fitBounds(bounds);

将折线设置为地图

<?
$i = 0;
foreach ($this->gmaps as $value) {
    echo 'Route' . $i . '.setMap(map);';
    $i++;
}

这是从复选框

获取数据的功能

function isChecked(checkbox) {
    var Route = $(checkbox).data('route');
    if ($(checkbox).is(':checked') == true) {
        window[Route].setMap(map);
    } else {
        window[Route].setMap(null);
    }
}

这些是复选框。在这里我添加了data-routedate，因为我认为我必须将第二个参数传递给Route ...或者我不知道。

        $i = 0;
        foreach ($this->groupdates as $value) {
            echo '';
            echo '<label class="checkbox">
             <input checked type="checkbox" id="' . $i . '"  
             data-route="Route' . $i . '"
             data-routedate=' . $value['dateendRoute']. '';
            echo 'onclick="isChecked(this);"> ' . $value['dateendRoute'];
            echo '</label>';
            $i++;
?>

谢谢！如果我不够清楚，请问。

Answer 1

我所要做的就是用当前日期的变量填充数据路径，就像这样

$i = 0; // id checkbox
    $id = 0; // count for each checkbox for reach route  unique var     
    if ($this->gmaps) {
        foreach ($this->coords as $index => $value) {
            $num = count($value);
            $x = 0; // counter for the end of inner loop
            echo '<label class="checkbox">
             <input checked type="checkbox" id=' . $i . '
             data-route=';
            foreach ($value as $idroute) {
                if ($num - 1 != $x) {
                    echo 'Route' . $id . ',';
                } else {
                    echo 'Route' . $id;
                }
                $x++;
                $id++;
            }
            echo '  ';
            echo "onclick='isChecked(this);'> " . $index;
            echo "</label>";
            $i++;
        }

然后在js中拆分它们并创建一个数组。

    function isChecked(checkbox) {
    //var Route = $(checkbox).data('route');
    var Route = $(checkbox).data('route').split(",");
    for (var i = 0; i < Route.length; i++) {
        if ($(checkbox).is(':checked') == true) {
            window[Route[i]].setMap(map);
        } else {
            window[Route[i]].setMap(null);
        }
    }
}

在这种情况下，您可以使用数据属性作为数组来传递值。希望这会对某人有所帮助。

在javascript中按日期对多个折线进行分组

1 个答案: