Question

我对谷歌地图很新。在我的项目中，我基本上复制了使用我的api密钥的heatmap example，将taxiData替换为pastie.org中提供的后端数据。从服务器端提取数据的ajax调用如下：

 <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=<c:out value="${key}"/>&sensor=false&libraries=visualization">
</script>
 <script>
 var map, pointarray, heatmap;
    var taxiData = [];

    $(function(){
    var d = "2013-08-09T05:51:15Z";
    var postDate = new Date(d);
    var later =new Date(postDate);
    var earlier20 = new Date(later);
    later.setSeconds(later.getSeconds()+ 40);
    $.ajax({
    url: "<spring:url value="/streamview/do/retrieve_coordinates"/>",
    type: "post",
    data:{
    "startTime": earlier20.toISOString(),
    "endTime": later.toISOString()
    }

    }).done(function (data) {

    for(d in data){
         taxiData.push(new google.maps.LatLng(parseFloat(d.lat),parseFloat(d.lng)));
    }



    }).fail(function () {
    alert("FAILED");
    }).always(function(){


    });

     function initialize() {
        var mapOptions = {
            zoom: 7,
            center: new google.maps.LatLng(8.300616,-0.922852),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var pointArray = new google.maps.MVCArray(taxiData);

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });

        heatmap.setMap(map);
    }

    function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
    }

    function changeGradient() {
        var gradient = [
            'rgba(0, 255, 255, 0)',
            'rgba(0, 255, 255, 1)',
            'rgba(0, 191, 255, 1)',
            'rgba(0, 127, 255, 1)',
            'rgba(0, 63, 255, 1)',
            'rgba(0, 0, 255, 1)',
            'rgba(0, 0, 223, 1)',
            'rgba(0, 0, 191, 1)',
            'rgba(0, 0, 159, 1)',
            'rgba(0, 0, 127, 1)',
            'rgba(63, 0, 91, 1)',
            'rgba(127, 0, 63, 1)',
            'rgba(191, 0, 31, 1)',
            'rgba(255, 0, 0, 1)'
        ]
        heatmap.setOptions({
            gradient: heatmap.get('gradient') ? null : gradient
        });
    }

    function changeRadius() {
        heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
    }

    function changeOpacity() {
        heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
    }

    google.maps.event.addDomListener(window, 'load', initialize);

我不明白为什么它没有显示任何可识别的数据，因为我传递给它。 javascript中没有错误（没有firebug错误），但我的地图只是一个简单的地图，好像没有数据传递给它。我做错了什么？

Answer 1

当你</script>时，你有一个结束<script>然后直接跳到JS而没有开始var map, pointarray, heatmap;。
同样地，在</script>

之后，你有一些结束的JS

</script>

    });

这可能只是这个问题的复制和粘贴错误，而不是实际代码中的错误。

添加实际生成的JS代码也可能是有益的，例如：可能是lat / lng坐标错误吗？

Google MAP API v3：我在热图上显示数据时出现问题

1 个答案: