首页 > 解决方案 > 地图标记不与 csv 数据一起显示

问题描述

我的任务是建立一个网页,可以上传一个包含近 1,000 个纬度/经度点的 csv 文件,并为每个点显示地图标记。我的网页加载 csv 文件时没有任何错误,但地图标记不显示。我测试了一个坐标来检查我的标记代码是否有效,所以我认为我的问题是我如何从 csv 访问纬度/经度点。

csv在一列中设置如下:lat;lon 38.631913;-121.434879 38.478902;-121.431028 ...

javascript代码:

    function numberWithCommas(x) 
    {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function handleFileSelect(evt) 
    {
        
        var file = evt.target.files[0];
        
        Papa.parse(file, {
            header: true,
            dynamicTyping: true,
            complete: function(results) 
            {
                csv = [];

                if(results.meta.fields.indexOf("weight") == -1) 
                {
                    for(idx in results["data"]) {
                        var row = results["data"][idx];
                        csv.push(new google.maps.LatLng(row["lat"], row["lon"]))
                    }
                } 
                else 
                {
                    var max = results["data"][0]["weight"];

                    for(idx in results["data"]) 
                    {
                        var row = results["data"][idx];                         
                        max = Math.max(max, row["weight"]);
                        csv.push({locations: new google.maps.LatLng(row["lat"], row["lon"]),    weight: row["weight"]});
                    }

                    $("#max-label").html("max: "+numberWithCommas(max));
                }
                
                console.log(results);
                                    
            }
        });
    }
    
    function initMap() 
    {
    google.maps.visualRefresh = true;
      var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(38.58005837316562, -121.47850716420133),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };

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

        //if(marker) marker.setMap(null);
        for (var i = 0; i < csv.length; i++) {
        var position = new google.maps.LatLng(pointArray[i][1], pointArray[i][2]);
        var marker = new google.maps.Marker({
            position: position,
            map: map
        });
        
        marker.setMap(map);
        
    }
    }


    $(document).ready(function(){
        $("#csv-file").change(handleFileSelect);
        
        google.maps.event.addDomListener(window, 'load', initMap);
        
        $(function() {
            $( "#draggable" ).draggable();
        });
        

    });

标签: javascriptarrayscsv

解决方案


推荐阅读