谷歌热图

我想使用谷歌热图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

回答

相关问题