谷歌熱圖

我想使用谷歌熱圖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方法並只留下評論代碼一切正常。如果我使用來自後端的數據，我會看到地圖並且沒有加熱點。

在我的錯誤？

感謝對幫助

來源

2017-10-11 Евгений Сухомлин

瀏覽器的開發人員工具是否有任何例外情況？ –

消息：「不是數組或MVCArray，因此」名：「InvalidValueError」 @JordyvanEijk –

那麼有可能是你的問題。在你的javascript代碼中設置一個braekpoint並檢查數據屬性是否設置過 –

這是因爲你的文件異步加載，但你要同步設置數據，所以這會是不確定的。您可能需要重新考慮一下您的結構，但一種解決方案是在設置熱圖之前等待數據加載。或者只是將initMap移入異步回調。

來源

2017-10-11 14:14:20

回答

相關問題