谷歌熱圖

Question

我想使用 google heatmap api 在我的網站上制作熱圖

我在后端有列表，我在谷歌地圖上硬編碼了一些標記

這是我后端的代碼：

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

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);

 }

Answer 2

這是因為您的文件是異步加載的，但您正在嘗試同步設置數據，因此它將是未定義的。 您可能需要稍微重新考慮您的結構，但一種解決方案是在設置熱圖之前等待數據加載完畢。 或者只是將 initMap 移動到您的異步回調中。