Google 地图更改 JSON 覆盖单选按钮选择的填充颜色

Question

这是一张基本的 Google 地图，带有 JSON 叠加层

COLOR 单选按钮只是从 JSON 文件中提取颜色。

INCOME 单选按钮是一个 Chloropleth 地图，其中颜色或每个单独的多边形基于收入所属的范围。

我想更改 INCOME 地图的 JSON 叠加层的填充颜色。

我有两个决定叶绿体颜色的开关

第一个开关连接到 var incomeColorArea1

第二个开关连接到 var incomeColorArea2

我还有两个单独的 JSON 文件 var area1 和 var area2

我希望第一个开关与 var area1 关联，我希望第二个开关与 var area2

我尝试在下面添加一个简单的 if then 语句：

    if (area1.checked) {
    var incomeColor = incomeColorArea1;
    }   else if (area2.checked) {
    var incomeColor = incomeColorArea2; 
    }

没用。

唯一可行的方法是手动更改：

incomeColor 到 incomeColorArea1 或 incomeColorArea2

在下面的代码中：

    if (color.checked) {    
        return {
          fillColor: feature.getProperty('COLOR'),
          strokeWeight: 1,
          strokeColor: 'black',
          fillOpacity: 0.4,
          strokeOpacity: 1,
          zIndex: 0
        };
      } else if (income.checked) {    
        return {
            fillColor: incomeColor,
            strokeWeight: 1,
            strokeColor: 'black',
            fillOpacity: 0.8,
            strokeOpacity: 1,
            zIndex: 0
        };
      }
    }

完整代码如下：

   var map;
 //COLORS
 // Income Map Color
 var incomeColor1 = '#f2f0f7';
 var incomeColor2 = '#cbc9e2';
 var incomeColor3 = '#9e9ac8';
 var incomeColor4 = '#756bb1';
 var incomeColor5 = '#54278f';

 // LEGEND SCORES
 // Income Map Score
  //Area 1 incomeScore
  var incomeScore1 = 20000;
  var incomeScore2 = 50000; 
  var incomeScore3 = 80000;
  var incomeScore4 = 110000;
  var incomeScore5 = 140000;
  //Area 2 incomeScore
  var incomeScore6 = 40000;
  var incomeScore7 = 60000; 
  var incomeScore8 = 100000;
  var incomeScore9 = 160000;
  var incomeScore10 = 500000;

  function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 40.656963,lng: -112.506664},
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/t1mhs');
  var area2 = createArea('https://api.myjson.com/bins/zle5c');
   
function changeMap(feature) {

 var incomeScore = feature.getProperty('INCOME'); 

   var incomeColorArea1 = ""; // polygon fill color

 //Area 1 Income Switch
  switch (true) {
   case ( incomeScore == 0 || incomeScore === null ): // in case of no value
     incomeColor = '#d4d4d4'; break;
   case ( incomeScore <=  incomeScore1): incomeColorArea1 = incomeColor1; break;
   case ( incomeScore <=  incomeScore2): incomeColorArea1 = incomeColor2; break;
   case ( incomeScore <=  incomeScore3): incomeColorArea1 = incomeColor3; break;
   case ( incomeScore <=  incomeScore4): incomeColorArea1 = incomeColor4; break;
   case ( incomeScore <=  incomeScore5): incomeColorArea1 = incomeColor5; break;
   default: incomeColor = '#d4d4d4'; break;
  }
   var incomeColorArea2 = ""; // polygon fill color 
 //Area 2 Income Switch
  switch (true) {
   case ( incomeScore == 0 || incomeScore === null ): // in case of no value
     incomeColor = '#d4d4d4'; break;
   case ( incomeScore <=  incomeScore6):  incomeColorArea2 = incomeColor1; break;
   case ( incomeScore <=  incomeScore7):  incomeColorArea2 = incomeColor2; break;
   case ( incomeScore <=  incomeScore8):  incomeColorArea2 = incomeColor3; break;
   case ( incomeScore <=  incomeScore9):  incomeColorArea2 = incomeColor4; break;
   case ( incomeScore <=  incomeScore10): incomeColorArea2 = incomeColor5; break;
   default: incomeColor = '#d4d4d4'; break;
  }
 
  if (area1.checked) {
  var incomeColor = incomeColorArea1;
  } else if (area2.checked) {
  var incomeColor = incomeColorArea2; 
  }

  if (color.checked) { 
   return {
     fillColor: feature.getProperty('COLOR'),
     strokeWeight: 1,
     strokeColor: 'black',
     fillOpacity: 0.4,
     strokeOpacity: 1,
     zIndex: 0
   };
    } else if (income.checked) {   
   return {
    fillColor: incomeColor,
    strokeWeight: 1,
    strokeColor: 'black',
    fillOpacity: 0.8,
    strokeOpacity: 1,
    zIndex: 0
   };
    }
  }  

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    
 area.loadGeoJson(url);
    area.setStyle(changeMap);
 area.addListener('click', clickFunc);  
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('color'), 'click', setArea);   
  google.maps.event.addDomListener(document.getElementById('income'), 'click', setArea);   
}

      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<div id="content">

<form class="form"">
 <div class="switch-field">
  <input type="radio" id="area1" name="switch-two" checked/>
  <label for="area1">Area 1</label>
  <input type="radio" id="area2" name="switch-two"/>
  <label for="area2">Area 2</label>
 </div>

<label class="container" style="margin-top: 12px;">COLOR
  <input type="radio" checked="checked" name="radio" id="color">
  <span class="checkmark"></span>
</label>
 </br>
<label class="container">INCOME
  <input type="radio" name="radio" id="income">
  <span class="checkmark"></span>
</label>
</form>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

您的代码中有错字。

area1 和 area2 是 google.maps.Data 对象（以及 HTML 元素 ID），您无法访问 HTML 元素的 'checked' 属性作为 area1.checked。改变这个：

if (area1.checked) {
  var incomeColor = incomeColorArea1;
} else if (area2.checked) {
  var incomeColor = incomeColorArea2;   
}

至：

if (document.getElementById("area1").checked) {
  incomeColor = incomeColorArea1;
} else if (document.getElementById("area2").checked) {
  incomeColor = incomeColorArea2;
}

proof of concept fiddle

代码片段：

var map;
//COLORS
// Income Map Color
var incomeColor1 = '#f2f0f7';
var incomeColor2 = '#cbc9e2';
var incomeColor3 = '#9e9ac8';
var incomeColor4 = '#756bb1';
var incomeColor5 = '#54278f';

// LEGEND SCORES
// Income Map Score
//Area 1 incomeScore
var incomeScore1 = 20000;
var incomeScore2 = 50000;
var incomeScore3 = 80000;
var incomeScore4 = 110000;
var incomeScore5 = 140000;
//Area 2 incomeScore
var incomeScore6 = 40000;
var incomeScore7 = 60000;
var incomeScore8 = 100000;
var incomeScore9 = 160000;
var incomeScore10 = 500000;

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 40.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/t1mhs');
  var area2 = createArea('https://api.myjson.com/bins/zle5c');

  function changeMap(feature) {
    var incomeScore = feature.getProperty('INCOME');
    var incomeColorArea1 = ""; // polygon fill color

    //Area 1 Income Switch
    switch (true) {
      case (incomeScore == 0 || incomeScore === null): // in case of no value
        incomeColorArea1 = '#d4d4d4';
        break;
      case (incomeScore <= incomeScore1):
        incomeColorArea1 = incomeColor1;
        break;
      case (incomeScore <= incomeScore2):
        incomeColorArea1 = incomeColor2;
        break;
      case (incomeScore <= incomeScore3):
        incomeColorArea1 = incomeColor3;
        break;
      case (incomeScore <= incomeScore4):
        incomeColorArea1 = incomeColor4;
        break;
      case (incomeScore <= incomeScore5):
        incomeColorArea1 = incomeColor5;
        break;
      default:
        incomeColorArea1 = '#d4d4d4';
        break;
    }
    var incomeColorArea2 = ""; // polygon fill color 
    //Area 2 Income Switch
    switch (true) {
      case (incomeScore == 0 || incomeScore === null): // in case of no value
        incomeColorArea2 = '#d4d4d4';
        break;
      case (incomeScore <= incomeScore6):
        incomeColorArea2 = incomeColor1;
        break;
      case (incomeScore <= incomeScore7):
        incomeColorArea2 = incomeColor2;
        break;
      case (incomeScore <= incomeScore8):
        incomeColorArea2 = incomeColor3;
        break;
      case (incomeScore <= incomeScore9):
        incomeColorArea2 = incomeColor4;
        break;
      case (incomeScore <= incomeScore10):
        incomeColorArea2 = incomeColor5;
        break;
      default:
        incomeColorArea2 = '#d4d4d4';
        break;
    }

    if (document.getElementById("area1").checked) {
      var incomeColor = incomeColorArea1;
    } else if (document.getElementById("area2").checked) {
      var incomeColor = incomeColorArea2;
    }

    if (color.checked) {
      return {
        fillColor: feature.getProperty('COLOR'),
        strokeWeight: 1,
        strokeColor: 'black',
        fillOpacity: 0.4,
        strokeOpacity: 1,
        zIndex: 0
      };
    } else if (income.checked) {
      return {
        fillColor: incomeColor,
        strokeWeight: 1,
        strokeColor: 'black',
        fillOpacity: 0.8,
        strokeOpacity: 1,
        zIndex: 0
      };
    }
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();

    area.loadGeoJson(url);
    area.setStyle(changeMap);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('color'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('income'), 'click', setArea);
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  height: 85%;
  width: 100%;
}

<div id="content">

  <form class="form">
    <div class="switch-field">
      <input type="radio" id="area1" name="switch-two" checked/>
      <label for="area1">Area 1</label>
      <input type="radio" id="area2" name="switch-two" />
      <label for="area2">Area 2</label>
    </div>

    <label class="container" style="margin-top: 12px;">COLOR
  <input type="radio" checked="checked" name="radio" id="color">
  <span class="checkmark"></span>
</label>
    </br>
    <label class="container">INCOME
  <input type="radio" name="radio" id="income">
  <span class="checkmark"></span>
</label>
  </form>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>

Google 地图更改 JSON 覆盖单选按钮选择的填充颜色

Google Maps Change fillColor of JSON Overlay On Radio Button Selection

javascript

json

google-maps-api-3