条件在标记

时间:2017-06-03 20:42:44

标签: javascript php google-maps csv google-maps-api-3

我试图在谷歌地图上绘制不同的标记,从csv文件中获取数据。我使用parsecsv-0.4.3-beta来读取csv。一切都工作得很好,除非我比较两个字段并尝试根据它更改标记。它正在改变标记,但对于少数字段,它给出了错误的标记。我认为我在这种情况下犯了一些错误。

<?php
# include parseCSV class.
require_once('../parsecsv.lib.php');
# create new parseCSV object.
$csv = new parseCSV();
# Parse '_books.csv' using automatic delimiter detection...
$csv->auto('latlang.csv');
# ...or if you know the delimiter, set the delimiter character
# if its not the default comma...
// $csv->delimiter = "\t";   # tab delimited
# ...and then use the parse() function.
// $csv->parse('_books.csv');
//print_r ($csv->data);
?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    </style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWPvg5SpuPqRnY0Ldhlz2QhLgrCqnlYFM&sensor=false"></script>
<script type="text/javascript">
    var markers = <?php print json_encode($csv->data); ?>;
    window.onload = function () {
        LoadMap();
    }
    function LoadMap() {
        var mapOptions = {
            center: new google.maps.LatLng(markers[1].Latitude, markers[1].Longtitude),
            zoom: 7,
            styles: [{"stylers": [{ "saturation": -100 }]}],
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

        //Create and open InfoWindow.
        var infoWindow = new google.maps.InfoWindow();

        for (var i = 0; i < markers.length; i++) {
            var data = markers[i];
            var myLatlng = new google.maps.LatLng(data.Latitude, data.Longtitude);
            var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
            var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
            **if (data.CL < data.DL) {
                var image = image2;
            }else {
                var image = image1;
            };**

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.Station,
                icon:image,
            });
            //Attach click event to the marker.
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + "<p>" + "<b>Station:</b> " + data.Station + "<br>"+ "CL:" + data.CL + "<br>" + "<b>River Name: </b>" + data.RiverName + "<br>" + "<b>DL(mPWD): </b>" + data.DL +"<br>" + "<b>HRWL(mPWD):</b> "+ data.HRWL +"</p>"+"</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>
<div id="dvMap" style="width: 900px; height: 500px">
</div>
</body>
</html>

以下是csv文件的示例:

csv file sample

在大多数情况下,它显示正确的标记......某些标记不符合条件。

1 个答案:

答案 0 :(得分:0)

请在代码中添加以下行:

data.CL = Number(data.CL);
data.DL = Number(data.DL);
if (data.CL < data.DL) {
    var image = image2;
}else {
    var image = image1;
};

您的数据是以字符串形式出现的,但我们正在使用&lt;运算符检查,所以在某些情况下它可能会失败。最好转换然后检查更多或更少。