0

私はグーグルマップにかなり慣れていません。私のプロジェクトでは、基本的にAPIキーを使用してヒートマップの例をコピーし、pastie.orgでtaxiData利用可能なバックエンドから取得したデータに置き換えました。サーバー側からデータを取得する 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 エラーはありません) が、私のマップは、データが渡されなかったかのような単純なマップです。私は何を間違っていますか？

4

1 に答える 1

0

クロージングがあり、</script>そうすると、オープニングなしで再びJSに直接ジャンプ<script>しますvar map, pointarray, heatmap;。
同様に、最後にいくつかの終了JSがあります</script>

</script>

    });

これは、実際のコードのエラーではなく、この質問のコピー アンド ペースト エラーである可能性があります。

実際に生成された JS コードを追加することも有益な場合があります。たとえば、緯度/経度座標のエラーではないでしょうか?

于 2013-09-09T14:06:40.897 に答える