Как изменить цвет определенного состояния при выделении на карте Google - PullRequest
Новая
       21

Как изменить цвет определенного состояния при выделении на карте Google

0 голосов
/ 03 мая 2019

Я работаю над API карт Google, хочу изменить цвет нескольких состояний при выборе состояний в картах Google.как-то так map

Я попробовал следующий код, но он раскрашивает всю страну. 

<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'map_api_key'
        });
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
            ['State', 'Popularity'],
            ['Maharashtra', 022],
            ['Goa', 19],
            ['Gujarat', 20]
       ]);

       var options = {};
       options['region'] = 'IN';
       options['colors'] = ['yellow', 'green', 'blue']; //orange colors
       options['dataMode'] = 'markers';

       var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

       chart.draw(data, options);
   }
   </script>
</head>
    <body>
        <div id="regions_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

Но это раскраска Индии синим цветом map

1 Ответ

1 голос
/ 03 мая 2019

сначала, чтобы отобразить каждое "состояние", вам понадобится следующая опция ... 

resolution: 'provinces'

затем GeoChart использует цвета, отличные от других диаграмм Google.
он используетColorAxis

colorAxis - Объект, который задает сопоставление между значениями цветового столбца и цветами на шкале градиента.Чтобы указать свойства этого объекта, вы можете использовать буквенное обозначение объекта, как показано здесь:
{maxValue: 1, minValue: 0, colors: ['#FF0000', '#00FF00']}

цвет рассчитывается на основе значения строки из сочетания предоставленных цветов.
в только что указанном примере,
цвет строки с минимальным значением будет # FF0000
цвет строки с максимальным значением будет # 00FF00
остальные цвета строки будутградиент где-то между двумя

, чтобы предоставить каждому состоянию уникальный цвет,
нам нужно будет предоставить значения для каждой строки
вместе с цветом

, поэтому вваш пример, нам нужно ... 

colorAxis: {
  colors: ['green', 'blue', 'yellow'],
  values: [19, 20, 22]  // <-- colors must be in numerical order
},

примечание, каждое состояние, которое вы хотите выделить, должно иметь уникальное значение.

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages:['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Popularity'],
    ['Maharashtra', 22],
    ['Goa', 19],
    ['Gujarat', 20]
  ]);

  var options = {
    region: 'IN',
    colorAxis: {
      colors: ['green', 'blue', 'yellow'],
      values: [19, 20, 22]
    },
    dataMode: 'markers',
    resolution: 'provinces',
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>
...