2015-07-10 63 views
1

我使用谷歌地圖js api拍了一張熱圖。所有的位置加權,並希望顏色代表權重,而我得到一個紅點,淡黃色,然後是綠色。不是這只是一個測試,我會填充數據庫中的郵政編碼和權重Google熱圖根據亮度改變顏色

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var mapProp = { 
    center:new google.maps.LatLng(40.785091,-73.968285), 
    zoom:11, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    codeAddress("10001", 6119); 
    codeAddress("10002", 5180); 
    codeAddress("10003", 4110); 
    codeAddress("10004", 899); 
    codeAddress("10005", 520); 
    codeAddress("10006", 599); 

    function codeAddress(zip, noAccidents) { 
    //var address = document.getElementById("address").value; 
geocoder.geocode({ 'address': zip}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 

     var hotSpot = results[0].geometry.location; 
     console.log(hotSpot + " " + noAccidents); 

     var heatMapZip = [ 
     {location: hotSpot, weight: noAccidents} 

     ]; 

     var color =[ 
      "#ff0000", 
      "#00ff00" 
     ]; 

     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: heatMapZip, 
      radius: 50, 
      dissapating: false 
     }); 
     heatmap.setMap(map); 

     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 


} 

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

MAP

+0

您是在「權重」如何對應顏色有點含糊。你的數組「顏色」是做什麼的?沒有看起來......爲什麼不通過你的HeatmapLayerOptions的'gradient'參數?另外注意:參數被記錄爲「消散」而不是「消散」 – duncan

回答

3

你應該使用功能heatmap.set('gradient', gradient);設置你的熱圖的顏色。顏色可以通過事故#和數據集中#的最大值和最小值來計算。

我爲此創建了一個小提琴,希望它有幫助。

http://jsfiddle.net/hzy0y6es/