谷歌热图

Question

我想使用google heatmap api

在我的网站上制作热图

我在后端有List，我在谷歌地图上硬编码了一些标记

这是我后端的代码：

public JsonResult GetData()
    {
        // создадим список данных
        List<Park> stations = new List<Park>();
        stations.Add(new Park()
        {
            Id = 1,
            GeoLat = 37.610489,
            GeoLong = 55.752308,
            Weight = 1.0
        });
        stations.Add(new Park()
        {
            Id = 2,
            GeoLat = 37.608644,
            GeoLong = 55.75226,
            Weight = 1.2
        });
        stations.Add(new Park()
        {
            Id = 3,
            GeoLat = 37.609073,
            GeoLong = 55.750509,
            Weight = 1.0
        });

        return Json(stations, JsonRequestBehavior.AllowGet);
    }

在前端我有这个代码：

@section scripts {

<script type="text/javascript">



    var map, heatmap;

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

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: getPoints(),
            map: 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.set('gradient', heatmap.get('gradient') ? null : gradient);
    }

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

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

    function getPoints() {

        $.getJSON('@Url.Action("GetData", "Home")',
            function(data) {
                $.each(data,
                    function(i, item) {
                        var marker = new google.maps.Marker({
                            'location': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                            'map': map,
                            'weight': item.Weight
                        });


                        /*return [
                          {location: new google.maps.LatLng(37.782, -122.447), weight: 12},
                          {location: new google.maps.LatLng(37.782, -122.443), weight: 12},
                          {location: new google.maps.LatLng(37.782, -122.441), weight: 12},
                          {location: new google.maps.LatLng(37.782, -122.439), weight: 12}

                      ];*/
                    });
            });
    }
</script>

如果我删除了我的getJson方法并且只留下注释代码就可以了。如果我使用来自后端的数据，我会看到地图而没有加热点。

我的错误是什么？

感谢帮助

Answer 1

这是因为您的文件是异步加载的，但是您正在尝试同步设置数据，因此它将是未定义的。您可能需要稍微重新考虑一下您的结构，但一种解决方案是在设置热图之前等待数据加载。或者只是将initMap移动到异步回调中。

Answer 2

maps.LatLng(item.GeoLong, item.GeoLat)这是错误的。应该是GeoLong，然后是GeoLat。这是您解决的示例：

   function iniMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: { lat: 21.00591, lng: 72.69263 },
                mapTypeId: 'satellite'
            });
          getPoints();
}

 function getPoints() {
  var mark = []

   for (var i = 0; i < resultArray.length; i++) {

   mark[i] = new google.maps.LatLng(resultArray[i].GeoLat,resultArray[i].GeoLong);

   }

heatmap = new google.maps.visualization.HeatmapLayer({
data: mark
});
heatmap.setMap(map);

 }