javascript - Google heat map change colour based on intensity - Stack Overflow

admin管理员组

文章数量:1327685

I have crested a heat-map using google maps js api. all the locations are weighted and would like the color to represent the weights instead i am getting a red dot that fades to yellow and then green. not this is only a test and i will be populating the zip codes and weights from a database

<script src=".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);

I have crested a heat-map using google maps js api. all the locations are weighted and would like the color to represent the weights instead i am getting a red dot that fades to yellow and then green. not this is only a test and i will be populating the zip codes and weights from a database

<script src="https://maps.googleapis./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);

• javascript
• google-maps
• google-maps-api-3
• maps
• heatmap

Share Improve this question Follow edited Jul 13, 2016 at 16:14 Lonergan6275 asked Jul 10, 2015 at 13:55 Lonergan6275Lonergan6275 2,03866 gold badges3434 silver badges6363 bronze badges 1

• You're a little vague on how 'weight' corresponds to colours. What does your array color do? Nothing it seems... why not pass that as the gradient parameter for your HeatmapLayerOptions? Also NB: the parameter is documented as dissipating not dissapating – duncan Commented Jul 10, 2015 at 14:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You should use the function heatmap.set('gradient', gradient); to set the color of your heat map. The color can be calculated by the # of accident, and the max and min of the # in your data set.

I created a fiddle for that, hope it helps.

http://jsfiddle/hzy0y6es/

本文标签： javascriptGoogle heat map change colour based on intensityStack Overflow