Google热图仅显示一个位置

时间:2017-10-13 11:28:56

标签: javascript c# asp.net asp.net-mvc google-maps-api-3

我有列表的后端,我有2个位置。

这是后端的代码。

public JsonResult GetData()
    {

        List<Park> stations = new List<Park>();

        stations.Add(new Park()
        {
            Id = 2,
            GeoLat = 37.608644,
            GeoLong = 55.75226,
            Weight = 12
        });

        stations.Add(new Park()
        {
            Id = 3,
            GeoLat = 30.5807913,
            GeoLong = 50.493239,

            Weight = 12
        });

        return Json(stations.ToArray(), JsonRequestBehavior.AllowGet);
    }

我在客户端就像这样

 function getPoints() {

        $.getJSON('@Url.Action("GetData", "Home")',
            function (data) {
                var marker;
                // Проходим по всем данным и устанавливаем для них маркеры
                $.each(data,
                    function(i, item) {
                         marker = [
                            {
                                'location': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                                'map': map,
                                'weight': item.Weight
                            }
                        ];
                    });



                var pointArray = new google.maps.MVCArray(marker);
                console.log(pointArray);
                heatmap = new google.maps.visualization.HeatmapLayer({
                    data: pointArray
                });
                heatmap.setMap(map);


            });
    };

并在此方法中更新地图

 function initMap() {
        map = new google.maps.Map(document.getElementById('map'),
            {
                zoom: 13,
                center: { lat: 55.752622, lng: 37.617567 },
                mapTypeId: 'satellite'
            });
        getPoints();
    }

但我只看到一个地方。我不明白为什么,因为我在这一行设置了断点

return Json(stations.ToArray(), JsonRequestBehavior.AllowGet);

我返回2个位置。

哪里可以成为我的问题?

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

before the operation began

应更改为:

var marker;

var marker = [];

应更改为:

marker = [
    {
        'location': new google.maps.LatLng(item.GeoLong, item.GeoLat),
        'map': map,
        'weight': item.Weight
    }
];

现有代码的问题在于,您分配给marker.push({ 'location': new google.maps.LatLng(item.GeoLong, item.GeoLat), 'map': map, 'weight': item.Weight }); 单个元素数组(因此您将有效地仅显示最后一个标记)。您目前没有添加到该阵列。我的更改使用marker来解决此问题。