Google Maps MVCArray Avec Fusion Tables

Probablement une question recrue, actuellement j'ai créé un fichier HTML couche heatmap en utilisant des emplacements codés en dur dans mon fichier HTML. Voici un exemple de mon code. Ce que j'essaye de faire est de remplacer le "heatMapData" avec des données d'une table de fusion. L'objectif est que la carte soit mise à jour chaque fois que la table de fusion est mise à jour. Toute aide serait appréciée.Google Maps MVCArray Avec Fusion Tables

var heatMapData = [{location: new google.maps.LatLng(42.071523,-72.624257), weight:4.2}, 
        {location: new google.maps.LatLng(42.37686,-72.46914), weight:1.6} 
        ]; 

     function initialize() { 
     var mapOptions = { 
      zoom: 4, 
      center: new google.maps.LatLng(38.82, -99.408660), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 

     pointArray = new google.maps.MVCArray(heatMapData); 

     heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: pointArray 
     }); 

     heatmap.setMap(map); 
     }

L'utilisation du site par exemple le Dr Molle affiché Je ne peux pas sembler rendre la carte de la chaleur quand je change la référence ID table de fusion (il a les mêmes noms de colonnes: Lat, Long, Hits). Des idées?

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Test Map</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 


    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 



     <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&.js"></script> 


    <style type='text/css'> 

    </style> 



<script type='text/javascript'>//<![CDATA[ 

     function initialize() { 
     var mapOptions = { 
      zoom: 4, 
      center: new google.maps.LatLng(38.82, -99.408660), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 

     //query the fusiontable via ajax  
     $.ajax(
       { 
        dataType: 'jsonp', 
        url  : 'https://www.googleapis.com/fusiontables/v1/query', 
        data : { 
           sql:'SELECT Lat,Long,Hits \ 
            from 1jsYEXL-Bz0dse02Llf9cUquXkU0MqH6JlUyNhLE', 
           key:'AIzaSyCoiF1SlcuQPqoRdbP58ZCi3YrPx4wvMfg' 
          }, 
        success: function(data){ 
          var heatMapData=[]; 
           //prepare the data 
          $.each(data.rows,function(i,r){ 
           heatMapData.push({ 
            location:new google.maps.LatLng(r[0],r[1]), 
            weight:Number(r[2]) 
           }); 
          }); 
           //create the weighted heatmap 
           new google.maps.visualization.HeatmapLayer({ 
            data: heatMapData,map:map 
            }); 
          } 
       }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
//]]> 

</script> 


</head> 
<body> 
    <div id="map_canvas" style="height: 800px; width: 1000px;"></div> 

</body> 


</html>

Source

2013-02-20 davids12

savez-vous qu'il ya aussi [** FusionTable ** Heatmaps] (https://developers.google.com/maps/documentation/javascript/layers#FusionTablesHeatmaps)? –

Oui, mais j'essaie d'utiliser l'objet WeightedLocation. Mon objectif est de créer une carte thermique pondérée à partir des données d'une table de fusion afin de faciliter la mise à jour. – davids12

Vous pouvez interroger la table fusionTable et créer les données pour la couche à partir de la réponse.

Exemple (en utilisant jQuery et ajax):

$.ajax(
       { 
        dataType: 'jsonp', 
        url  : 'https://www.googleapis.com/fusiontables/v1/query', 
        data : { 
           sql:'SELECT Lat,Long,Hits \ 
            from 1LL0eWI89nGxJ17XZDbWKsWahPyzQCAH8MHoAPSk', 
           key:'yourKey' 
          }, 
        success: function(data){ 
          var heatMapData=[]; 
           //prepare the data 
          $.each(data.rows,function(i,r){ 
           heatMapData.push({ 
            location:new google.maps.LatLng(r[0],r[1]), 
            weight:Number(r[2]) 
           }); 
          }); 
           //create the weighted heatmap 
           new google.maps.visualization.HeatmapLayer({ 
            data: heatMapData,map:map 
            }); 
          } 
       });

Démo: http://jsfiddle.net/doktormolle/RxMdf/

Note: lorsque vous utilisez ajax vous devez utiliser JSONP pour contourner les navigateurs de même origine-restrictions.
Bien sûr, vous pouvez demander les données aussi Serverside.

Cependant, si elle est utilisable dans votre application dépend de la quantité de données, car les données complètes (emplacement et poids) doivent être téléchargées par le client.

Source

2013-02-21 23:36:55

Existe-t-il un autre moyen d'accomplir ceci sans utiliser ajax? J'ai du mal à faire fonctionner ça correctement. La démo que vous avez postée est géniale, exactement ce que je veux. J'ai essayé d'utiliser ce même code depuis la démo, en remplaçant seulement la table de fusion par ma propre table de fusion et je n'arrive pas à donner de résultats sur la carte. – davids12

Vous pouvez également le faire sans ajax, télécharger les données sur le serveur et rendre les données disponibles en javascript. Lorsque vous utilisez la démo avec votre table, vous devez également modifier les noms des (dans la Col. démo Lat, Long, Hits) –

Voir l'exemple ci-dessus mis à jour le Dr Molle. J'ai mis à jour l'ID Fusion Table et quelques autres options de l'exemple, mais je n'arrive pas à rendre le calque heatmap. – davids12

Google Maps MVCArray Avec Fusion Tables

Répondre

Questions connexes