2015-07-10 59 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/