2015-07-10 3 views
1

У меня есть горячая карта, использующая google maps 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

Вы немного туманно о том, как «вес» соответствует цветам. Что делает ваш массив 'color'? Ничего похоже ... почему бы не передать это как параметр «gradient» для вашего HeatmapLayerOptions? Также NB: параметр документирован как «рассеивающий», а не «рассеивающий» – duncan

ответ

3

Вы должны использовать функцию heatmap.set('gradient', gradient);, чтобы установить цвет вашего тепла карте. Цвет может быть рассчитан с помощью # аварии, а также макс и мин # в вашем наборе данных.

Я создал скрипку для этого, надеюсь, что это поможет.

http://jsfiddle.net/hzy0y6es/

Смежные вопросы