area1

area1

关注
发信
关注(28)粉丝(399)

javascript - Google Maps更改单选按钮选择时JSON覆盖的fillColor

这是带有JSON叠加层的基本Google Map

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

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

我想更改INCOME Map的JSON叠加层的fillColor。

我有两个确定绿藻色的开关

第一个开关连接到
var incomeColorArea1

第二个开关连接到
var incomeColorArea2

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

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

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

    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>

最佳答案

您的代码中有错字。

area1和area2是google.maps.Data对象（以及HTML元素ID），您不能以area1.checked访问HTML元素的“选中”属性。更改此：

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

javascript - Google Maps更改单选按钮选择时JSON覆盖的fillColor-LMLPHP

代码段：



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>

关于javascript - Google Maps更改单选按钮选择时JSON覆盖的fillColor，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55822398/

10-09 17:57
Powered by LMLPHP ©2024 area1 0.040898