2017-10-25 7 views
-1

프로젝트에 히트 맵이 있습니다.히트 맵 색상 역전 (Google 히트 맵)

운전 경로가 표시됩니다. 여기

열 마커

function getDriving() { 
var url = $('#map').data('request-url2'); 
$.getJSON(url, 
    function (data) { 
     var marker = []; 

     $.each(data, 
      function (i, item) { 
       marker.push({ 
        'location': new google.maps.LatLng(item.Latitude2, item.Longitude2), 
        'map': map, 
        'weight': item.Speed, 
        'radius': 10 
       }); 
      }); 
     var pointArray = new google.maps.MVCArray(marker); 

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

속도가 빠른 그래서, 열 마커가 더 빨간색

을 보여주는 기능입니다. 그러나 나는 그것을 뒤집을 필요가있다. 더 빠른 속도의 마커는 더 빨라야합니다. 내가 어떻게 할 수 있니?

답변

0

히트 맵 색상의 예를 살펴보십시오.

var MIN_NO_ACC = 520; 
 
var MAX_NO_ACC = 6119; 
 

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

 
     var rate = (noAccidents - MIN_NO_ACC)/(MAX_NO_ACC - MIN_NO_ACC + 1); 
 
     console.log(rate); 
 
     var gradient = [ 
 
      'rgba(' + Math.round(255 * rate) + ', ' + Math.round(255 * (1 - rate)) + ', 0, 0)', 
 
      'rgba(' + Math.round(255 * rate) + ', ' + Math.round(255 * (1 - rate)) + ', 0, 1)' 
 
     ]; 
 
     heatmap.set('gradient', gradient); 
 
     heatmap.setMap(map); 
 

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

 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> 
 

 
<div id="googleMap"></div>

바이올린 : http://jsfiddle.net/hzy0y6es

+0

당신이 붙여 넣을 수 있습니다 링크? –

+0

죄송합니다. http://jsfiddle.net/hzy0y6es 링크를 수정할 수 없습니다. – nhaxahoihoc