Google map chaleur

Question

Je veux faire heatmap sur mon site en utilisant Google heatmap api

Je Liste sur arrière où je Hardcoded certains des marqueurs sur la carte google

Voici le code sur mon back-end:

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

Le front-end, j'ai ce code:

@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> 

Si je supprime ma méthode de getJSON et laissé seul code commenté tout va bien. Si j'utilise des données du backend, je vois la carte et pas de points de chaleur.

En quoi mon erreur?

Merci de l'aide

Answer 1

Il est parce que votre fichier est chargé de manière asynchrone, mais vous essayez de définir de manière synchrone les données, il est donc être indéfini va. Vous devrez peut-être repenser un peu votre structure, mais une solution consiste à attendre que les données soient chargées avant de définir votre heatmap. Ou déplacez simplement initMap dans votre callback asynchrone.